/* ==========================================================================
   AssistZen — design tokens
   Layout, spacing, radius and component metrics come from the 16 supplied
   screens (see UI_INVENTORY.md); colours and typography follow the AssistZen
   One-Page Brand Guideline v1.0:
     Midnight Navy #031D53 · Core Blue #06459B · Ocean Blue #0281C6
     Zen Cyan #03C3E9 · Mist #DCEBF8 · typeface Inter (headings SemiBold)
   Every colour, font, size, radius, shadow and chart colour used by the
   application lives here; components in app.css reference these variables only.
   Text colours meet WCAG 2.1 AA (4.5:1). Ocean Blue (4.2:1) and Zen Cyan
   (2.1:1) are therefore used for fills, icons, charts and focus rings, never
   for body text. Gradients are reserved for the logo/icon artwork.
   ========================================================================== */

/* ---- Self-hosted fonts (no third-party requests) ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  /* ---------- Brand ---------- */
  --sd-primary-strong: #031D53;        /* Midnight Navy — active nav item, primary CTAs ("Create Ticket", "Sign in") */
  --sd-primary-strong-hover: #06459B; /* Core Blue */
  --sd-primary: #06459B;               /* Core Blue — links, buttons, active tab/page, toggles (Settings › Primary colour) */
  --sd-primary-hover: #031D53;         /* Midnight Navy */
  --sd-primary-soft: #DCEBF8;          /* Mist — pale chips / selected rows */
  --sd-accent: #0281C6;                /* Ocean Blue — Settings › Accent colour (fills/icons only) */
  --sd-highlight: #03C3E9;             /* Zen Cyan — progress, active indicators, chart highlight (non-text) */
  --sd-on-primary: #FFFFFF;

  /* ---------- Text ---------- */
  --sd-text-heading: #031D53;          /* page titles, card titles, stat numbers */
  --sd-text: #14295C;                  /* body / table text */
  --sd-text-secondary: #34507F;        /* page subtitles, labels */
  --sd-text-muted: #4E6290;            /* dates, meta, helper text */
  --sd-text-subtle: #5A6C96;           /* timestamps, placeholders (4.5:1 on white) */
  --sd-nav-text: #1B3A78;              /* sidebar items */

  /* ---------- Surfaces ---------- */
  --sd-bg-page: #F4F9FE;
  --sd-bg-sidebar: #FFFFFF;           /* logo sits on white (brand guideline) */
  --sd-bg-surface: #FFFFFF;
  --sd-bg-search: #EDF5FC;
  --sd-bg-table-head: #F0F6FC;
  --sd-bg-help: #DCEBF8;               /* Mist — "Need help?" box, KB hero, tips card */
  --sd-bg-hover: #F1F7FD;
  --sd-bg-selected: #E6F0FA;
  --sd-bg-auth-panel: #FFFFFF;         /* white: the logo artwork sits on white (brand guideline) */
  --sd-bg-auth-form: #F4F9FE;          /* sign-in form side: light Mist tint (no UI gradients) */
  --sd-bg-urgent: #E2F6EE;             /* "Need urgent help?" card */
  --sd-bg-warning-soft: #FFF6E3;       /* "Create or Invite?" hint card */
  --sd-backdrop: rgba(3, 29, 83, .38);

  /* ---------- Borders ---------- */
  --sd-border: #E1EBF6;
  --sd-border-strong: #C9D9EC;         /* inputs, outline buttons */
  --sd-border-focus: #0281C6;
  --sd-divider: #EAF1F9;
  --sd-focus-ring: 0 0 0 3px rgba(2, 129, 198, .32);

  /* ---------- Tones (icon tiles, avatars, badges) ----------
     -bg: tile/badge background, -fg: icon stroke, -text: badge text (AA) */
  --sd-tone-blue-bg: #DCEBF8;    --sd-tone-blue-fg: #0281C6;    --sd-tone-blue-text: #06459B;
  --sd-tone-orange-bg: #FFEBD1;  --sd-tone-orange-fg: #F57C00;  --sd-tone-orange-text: #A84F00;
  --sd-tone-green-bg: #D3F7E4;   --sd-tone-green-fg: #12A150;   --sd-tone-green-text: #0B7A3B;
  --sd-tone-purple-bg: #ECE6FF;  --sd-tone-purple-fg: #7C3AED;  --sd-tone-purple-text: #6A2FD6;
  --sd-tone-red-bg: #FFE1E4;     --sd-tone-red-fg: #F0384C;     --sd-tone-red-text: #C21F33;
  --sd-tone-teal-bg: #D4F4F0;    --sd-tone-teal-fg: #0EA594;    --sd-tone-teal-text: #0A7266;
  --sd-tone-sky-bg: #D9F5FC;     --sd-tone-sky-fg: #03A9CB;     --sd-tone-sky-text: #04617A;
  --sd-tone-navy-bg: #E2EAF6;    --sd-tone-navy-fg: #06459B;    --sd-tone-navy-text: #031D53;
  --sd-tone-gray-bg: #EEF2F8;    --sd-tone-gray-fg: #64748B;    --sd-tone-gray-text: #4B5876;

  /* ---------- Semantic ---------- */
  --sd-success: #12A150;
  --sd-success-text: #0B7A3B;
  --sd-warning: #F59E0B;
  --sd-danger: #F0384C;
  --sd-danger-text: #C21F33;
  --sd-notification-dot: #F9273D;
  --sd-notification-count: #C21F33;
  --sd-heart: #E0182D;                 /* footer "Built with ❤" heart (red, 4.6:1 on white) */   /* numeric badges: white text needs 4.5:1 (WCAG AA) */

  /* ---------- Priorities (dots) ---------- */
  --sd-priority-critical: #C81E3A;
  --sd-priority-high: #FF4C5B;
  --sd-priority-medium: #FBA21A;
  --sd-priority-low: #0281C6;

  /* ---------- SLA indicators ---------- */
  --sd-sla-ontrack: #12A150;
  --sd-sla-atrisk: #F57C00;
  --sd-sla-breached: #F0384C;
  --sd-sla-paused: #4E6290;
  --sd-sla-met: #0B7A3B;

  /* ---------- Charts (Chart.js) ---------- */
  --sd-chart-created: #0281C6;         /* Ocean Blue */
  --sd-chart-resolved: #45C994;
  --sd-chart-created-fill: rgba(2, 129, 198, .20);
  --sd-chart-resolved-fill: rgba(69, 201, 148, .20);
  --sd-chart-grid: #E6EEF8;
  --sd-chart-axis: #4E6290;
  --sd-chart-track: #E6F0FA;           /* empty part of progress / horizontal bars */
  /* categorical series (Reports › Tickets by Project/Category) */
  --sd-chart-1: #06459B;   /* Core Blue */
  --sd-chart-2: #03C3E9;   /* Zen Cyan */
  --sd-chart-3: #1DBE6A;
  --sd-chart-4: #FBA21A;
  --sd-chart-5: #C78BF7;
  --sd-chart-6: #9DAACC;
  /* ticket status (Dashboard › Tickets by Status donut) */
  --sd-status-new: #2DC2B3;
  --sd-status-open: #FE5C70;
  --sd-status-inprogress: #FEB83E;
  --sd-status-awaiting: #0281C6;
  --sd-status-resolved: #45C994;
  --sd-status-closed: #A88EFC;
  --sd-status-reopened: #FF8A4C;
  /* project status (Projects › Project Status Overview donut) */
  --sd-project-active: #1DC487;
  --sd-project-inprogress: #0281C6;
  --sd-project-onhold: #FDBF4F;
  --sd-project-completed: #A88EFC;

  /* ---------- Typography ---------- */
  --sd-font-heading: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;   /* brand: Inter Display SemiBold */
  --sd-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sd-fs-display: 3.25rem;     /* 52px  auth hero "Welcome to AssistZen" */
  --sd-fs-h1: 2.25rem;          /* 36px  page titles */
  --sd-fs-h2: 1.75rem;          /* 28px  auth card title */
  --sd-fs-h3: 1.125rem;         /* 18px  card titles */
  --sd-fs-h4: 1rem;             /* 16px  section titles inside cards */
  --sd-fs-stat: 2rem;           /* 32px  stat numbers */
  --sd-fs-lead: 1.125rem;       /* 18px  page subtitles */
  --sd-fs-body: .9375rem;       /* 15px */
  --sd-fs-nav: 1rem;            /* 16px */
  --sd-fs-table: .84375rem;     /* 13.5px */
  --sd-fs-small: .8125rem;      /* 13px */
  --sd-fs-xs: .75rem;           /* 12px  badges, timestamps */
  --sd-fw-regular: 400;
  --sd-fw-medium: 500;
  --sd-fw-semibold: 600;
  --sd-fw-bold: 600;             /* brand: headings & labels are Inter SemiBold */
  --sd-fw-extrabold: 600;
  --sd-lh-tight: 1.15;
  --sd-lh-normal: 1.5;
  --sd-ls-heading: -.02em;

  /* ---------- Spacing (4px grid) ---------- */
  --sd-space-1: 4px;
  --sd-space-2: 8px;
  --sd-space-3: 12px;
  --sd-space-4: 16px;
  --sd-space-5: 20px;
  --sd-space-6: 24px;
  --sd-space-7: 28px;
  --sd-space-8: 32px;
  --sd-space-10: 40px;
  --sd-space-12: 48px;

  /* ---------- Radius ---------- */
  --sd-radius-xs: 4px;
  --sd-radius-sm: 6px;          /* badges */
  --sd-radius-md: 8px;          /* inputs, buttons, nav items */
  --sd-radius-lg: 12px;         /* stat icon tiles, quick-action tiles */
  --sd-radius-xl: 14px;         /* cards */
  --sd-radius-2xl: 18px;        /* auth card, KB hero */
  --sd-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --sd-shadow-card: 0 1px 2px rgba(3, 29, 83, .04), 0 6px 18px rgba(3, 29, 83, .045);
  --sd-shadow-raised: 0 10px 30px rgba(3, 29, 83, .10);
  --sd-shadow-dropdown: 0 12px 32px rgba(3, 29, 83, .14);
  --sd-shadow-button: 0 2px 6px rgba(3, 29, 83, .18);

  /* ---------- Layout ---------- */
  --sd-sidebar-width: 232px;
  --sd-topbar-height: 80px;
  --sd-content-pad: 28px;
  --sd-content-pad-mobile: 16px;
  --sd-right-rail: 332px;       /* right-hand widget column */
  --sd-control-height: 44px;
  --sd-control-height-sm: 36px;
  --sd-button-height: 46px;
  --sd-icon-tile: 56px;         /* stat card icon tile */
  --sd-avatar: 34px;
  --sd-avatar-lg: 46px;

  /* ---------- Breakpoints (documented; used literally in media queries) ----------
     xs < 576  phone portrait | sm ≥ 576 phone landscape | md ≥ 768 tablet portrait
     lg ≥ 992  tablet landscape / small laptop (sidebar becomes fixed)
     xl ≥ 1200 laptop (right rail shown beside content) | xxl ≥ 1400 desktop (designs drawn at ~1487px) */

  --sd-transition: .16s ease;
  color-scheme: light;
}

/* ---------- Dark interface mode (Settings › Appearance › Dark Mode) ----------
   Same hues as the light palette, surfaces inverted to deep navy. */
:root[data-theme="dark"] {
  --sd-primary-strong: #06459B;
  --sd-primary-strong-hover: #0A53B3;
  --sd-primary: #4FCDEE;
  --sd-primary-hover: #7FDCF3;
  --sd-primary-soft: #0E2C5E;
  --sd-text-heading: #EEF3FF;
  --sd-text: #D5DEF5;
  --sd-text-secondary: #AEBBE0;
  --sd-text-muted: #95A3CC;
  --sd-text-subtle: #8896C0;
  --sd-nav-text: #C3CFF0;
  --sd-bg-page: #021234;
  --sd-bg-sidebar: #031D53;
  --sd-bg-surface: #07214F;
  --sd-bg-search: #17244D;
  --sd-bg-table-head: #172451;
  --sd-bg-help: #182A57;
  --sd-bg-hover: #182754;
  --sd-bg-selected: #1C2E5E;
  --sd-bg-auth-panel: #07214F;
  --sd-bg-auth-form: #021234;
  --sd-bg-urgent: #12332F;
  --sd-bg-warning-soft: #3A2E14;
  --sd-border: #22325F;
  --sd-border-strong: #2E4174;
  --sd-divider: #1D2B55;
  --sd-tone-blue-bg: #0E2F66;   --sd-tone-blue-text: #A6DDF4;
  --sd-tone-orange-bg: #47300F; --sd-tone-orange-text: #FFC680;
  --sd-tone-green-bg: #123D2A;  --sd-tone-green-text: #7FE3AF;
  --sd-tone-purple-bg: #31245E; --sd-tone-purple-text: #C9B6FF;
  --sd-tone-red-bg: #4A1D2A;    --sd-tone-red-text: #FFA3AE;
  --sd-tone-teal-bg: #0F3B3A;   --sd-tone-teal-text: #7EE3D6;
  --sd-tone-sky-bg: #0F3550;    --sd-tone-sky-text: #93D8FB;
  --sd-tone-navy-bg: #1E2E5C;   --sd-tone-navy-text: #B9C8F2;  --sd-tone-navy-fg: #9FB4EE;
  --sd-tone-gray-bg: #232F55;   --sd-tone-gray-text: #B4BFDC;
  --sd-chart-grid: #22325F;
  --sd-chart-axis: #95A3CC;
  --sd-chart-track: #1D2B55;
  --sd-success-text: #7FE3AF;
  --sd-danger-text: #FFA3AE;
  --sd-sla-paused: #95A3CC;
  --sd-sla-met: #7FE3AF;
  --sd-shadow-card: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .25);
  color-scheme: dark;
}