/* Brocare Studio design tokens. Import once, before any component CSS.
   Source of truth: docs/studio-app/design/DESIGN.md.
   Palette is the Brocare AI fixed stock (brocare-ai-website/DESIGN.md). Blues only:
   no red, orange, amber or green anywhere. Tints are opacity on existing hexes, never new hues.
   Components reference the semantic tier only (--surface-*, --text-*, --state-*), never primitives. */

/* Fonts: self-hosted in production (same files as dashboard/assets/fonts). Mockups load Google Fonts. */

:root {
  color-scheme: dark;

  /* ---------- Tier 1: primitives (brand stock, named by hue) ---------- */
  --navy-950: #05081A;   /* deep: page ground */
  --navy-900: #0A0F2E;   /* mid: sunken panels, sidebar */
  --navy-800: #0D1440;   /* card: glass fill */
  --navy-700: #111B52;   /* raised fill (platform panel-2) */
  --navy-600: #16236A;   /* pressed / selected fill (platform raise) */
  --line-700: #1E3A6E;   /* cardborder: hairlines */
  --royal-600: #1A3BDB;  /* primary */
  --blue-500: #2D6FFF;   /* accent */
  --cobalt-700: #1565C0; /* gradient depth only, never flat */
  --ice-400: #4FC3F7;    /* live, approved, promised, focus */
  --mist-300: #B0C4DE;   /* textsec */
  --frost-100: #EAF1FF;  /* platform body text (white tinted blue) */
  --slate-400: #7F93B8;  /* platform dim text */
  --sky-300: #8AB4FF;    /* platform link */
  --pale-200: #CFE3FF;   /* text on blue fills */
  --white: #FFFFFF;

  /* ---------- Tier 1b: alpha tints of the stock (generated; used by components for glass, rings and shadows) ---------- */
  --blue-500-a14: rgba(45, 111, 255, 0.14);
  --blue-500-a35: rgba(45, 111, 255, 0.35);
  --blue-500-a45: rgba(45, 111, 255, 0.45);
  --blue-500-a55: rgba(45, 111, 255, 0.55);
  --blue-500-a85: rgba(45, 111, 255, 0.85);
  --blue-500-a90: rgba(45, 111, 255, 0.9);
  --ice-400-a07: rgba(79, 195, 247, 0.07);
  --ice-400-a14: rgba(79, 195, 247, 0.14);
  --ice-400-a20: rgba(79, 195, 247, 0.2);
  --ice-400-a25: rgba(79, 195, 247, 0.25);
  --ice-400-a28: rgba(79, 195, 247, 0.28);
  --ice-400-a40: rgba(79, 195, 247, 0.4);
  --ice-400-a45: rgba(79, 195, 247, 0.45);
  --ice-400-a55: rgba(79, 195, 247, 0.55);
  --ice-400-a60: rgba(79, 195, 247, 0.6);
  --ice-400-a80: rgba(79, 195, 247, 0.8);
  --line-700-a35: rgba(30, 58, 110, 0.35);
  --mist-300-a10: rgba(176, 196, 222, 0.1);
  --mist-300-a45: rgba(176, 196, 222, 0.45);
  --navy-900-a78: rgba(10, 15, 46, 0.78);
  --navy-900-a92: rgba(10, 15, 46, 0.92);
  --navy-900-a94: rgba(10, 15, 46, 0.94);
  --navy-950-a35: rgba(5, 8, 26, 0.35);
  --navy-950-a45: rgba(5, 8, 26, 0.45);
  --navy-950-a70: rgba(5, 8, 26, 0.7);
  --navy-950-a78: rgba(5, 8, 26, 0.78);
  --navy-950-a85: rgba(5, 8, 26, 0.85);
  --platform-shade-a40: rgba(0, 0, 0, 0.4);
  --platform-shade-a55: rgba(0, 0, 0, 0.55);
  --platform-shade-a60: rgba(0, 0, 0, 0.6);
  --royal-600-a25: rgba(26, 59, 219, 0.25);
  --royal-600-a55: rgba(26, 59, 219, 0.55);
  --royal-600-a60: rgba(26, 59, 219, 0.6);
  --royal-600-a70: rgba(26, 59, 219, 0.7);
  --royal-600-a90: rgba(26, 59, 219, 0.9);
  --shadow-a80: rgba(2, 4, 14, 0.8);
  --shadow-a90: rgba(2, 4, 14, 0.9);
  --sky-300-a35: rgba(138, 180, 255, 0.35);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a22: rgba(255, 255, 255, 0.22);
  --white-a25: rgba(255, 255, 255, 0.25);
  --white-a35: rgba(255, 255, 255, 0.35);
  --white-a45: rgba(255, 255, 255, 0.45);
  --white-a75: rgba(255, 255, 255, 0.75);

  /* ---------- Platform chrome (inside preview frames only; these are Instagram, TikTok and LinkedIn colours, not Studio colours) ---------- */
  --platform-ink: #111827;      --platform-ink-ig: #0B0F1C;   --platform-mute: #6B7280;  --platform-dot: #CBD5E1;
  --platform-ink-li: #1D2226;   --platform-mute-li: #666666;  --platform-mute-li-2: #555555; --platform-mute-li-3: #444444;
  --platform-canvas-li: #F3F2EF; --platform-line-li: #8A8A8A; --platform-line-li-2: #C4C4C4; --platform-rule: #E5E7EB;
  --platform-reel-bg: #000814;

  /* ---------- Tier 2: semantic roles ---------- */
  /* Surfaces, from back to front */
  --surface-ground: var(--navy-950);
  --surface-sunken: var(--navy-900);
  --surface-card: rgba(13, 20, 64, .62);        /* glass navy; solid fallback below */
  --surface-card-solid: var(--navy-800);
  --surface-raised: var(--navy-700);
  --surface-pressed: var(--navy-600);
  --surface-overlay: rgba(5, 8, 26, .72);       /* scrim behind sheets and modals */
  --surface-inset: rgba(5, 8, 26, .55);         /* fields, tracks, rows inside cards */
  --surface-hover: rgba(45, 111, 255, .08);
  --surface-selected: rgba(45, 111, 255, .16);

  /* Lines */
  --line: rgba(30, 58, 110, .70);
  --line-strong: var(--line-700);
  --line-soft: rgba(30, 58, 110, .40);
  --line-accent: rgba(45, 111, 255, .55);
  --line-control: rgba(127, 147, 184, .70);  /* field and toggle boundaries: 3.6:1 on ground, 3.4:1 on card (WCAG 1.4.11) */
  /* Accent blue #2D6FFF is 4.6:1 on ground but 4.0:1 on card: never use it for small text. */

  /* Text (contrast measured on --surface-ground #05081A and --surface-card-solid #0D1440) */
  --text-strong: var(--white);        /* 19.9:1 / 17.7:1  headings, stat values */
  --text-body: var(--frost-100);      /* 17.6:1 / 15.6:1  reading text */
  --text-muted: var(--mist-300);      /* 11.2:1 / 9.9:1   leads, secondary lines */
  --text-dim: var(--slate-400);       /* 6.4:1 / 5.7:1    meta, timestamps, captions */
  --text-link: var(--sky-300);        /* 9.5:1 / 8.4:1 */
  --text-on-fill: var(--white);       /* on --action-primary: 7.8:1 */
  --text-on-ice: var(--navy-950);     /* on ice fills: 9.9:1 */
  --text-on-blue-tint: var(--pale-200);

  /* Actions */
  --action-primary: var(--royal-600);
  --action-primary-hi: #2454E8;       /* = mix(royal 70%, accent 30%); documented derived stop, white label 6.0:1 */
  --action-secondary: rgba(13, 20, 64, .85);
  --action-ring: var(--blue-500);

  /* States (blue family only; each always paired with an icon and a word) */
  --state-live: var(--ice-400);                       /* running now: ice dot + ice text */
  --state-live-tint: rgba(79, 195, 247, .12);
  --state-live-line: rgba(79, 195, 247, .45);
  --state-needs: var(--white);                        /* needs Ali: inverted white chip, the loudest note */
  --state-needs-text: var(--navy-950);
  --state-done: rgba(45, 111, 255, .24);              /* approved, done, published: blue fill + check */
  --state-done-line: var(--blue-500);
  --state-done-text: var(--pale-200);
  --state-queued-line: var(--line-700);               /* queued, scheduled: hairline + clock */
  --state-queued-text: var(--mist-300);
  --state-failed-line: var(--white);                  /* failed or blocked: white ring + alert icon, never red */
  --state-failed-text: var(--white);
  --state-off-line: rgba(127, 147, 184, .55);         /* off, later, not yet live: dashed + dimmed */
  --state-off-text: var(--slate-400);

  /* Data visualisation (blues only; never colour alone) */
  --viz-series: var(--blue-500);
  --viz-series-soft: rgba(45, 111, 255, .35);
  --viz-highlight: var(--white);      /* the one outlier being discussed */
  --viz-reference: var(--mist-300);   /* benchmark lines, dashed */
  --viz-grid: rgba(30, 58, 110, .55);
  --viz-axis: var(--slate-400);

  /* Focus */
  --focus-ring: var(--ice-400);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---------- Type ---------- */
  --font-display: "Syne", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* Fixed rem scale (Operate surface, ratio about 1.2). Size / line-height / weight travel together. */
  --fs-display: 2.5rem;  --lh-display: 1.05;  /* 40px  page hero (Home greeting, desktop) */
  --fs-title: 1.875rem;  --lh-title: 1.1;     /* 30px  page title */
  --fs-h2: 1.25rem;      --lh-h2: 1.25;       /* 20px  section heading */
  --fs-h3: 1rem;         --lh-h3: 1.3;        /* 16px  card title (Syne 600) */
  --fs-body: 0.9375rem;  --lh-body: 1.55;     /* 15px  UI body */
  --fs-read: 1rem;       --lh-read: 1.65;     /* 16px  long-form, captions in previews, inputs */
  --fs-small: 0.8125rem; --lh-small: 1.45;    /* 13px  meta, secondary lines */
  --fs-label: 0.75rem;   --lh-label: 1.3;     /* 12px  chips, column heads */
  --fs-stat: 2rem;       --lh-stat: 1;        /* 32px  Syne 700 tabular */
  --fs-stat-sm: 1.5rem;                       /* 24px  compact stat */
  --track-display: -0.02em;
  --track-heading: -0.01em;
  --track-label: 0.06em;                      /* uppercase column heads only */

  /* ---------- Space (4px base) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --gutter: max(16px, env(safe-area-inset-left));
  --gutter-end: max(16px, env(safe-area-inset-right));

  /* ---------- Radius (concentric: outer = inner + inset) ---------- */
  --radius-xs: 6px;    /* swatches, tiny thumbs inside rows */
  --radius-sm: 10px;   /* thumbs, calendar chips */
  --radius-md: 14px;   /* fields, rows, inner panels (= 22 - 8 inset) */
  --radius-lg: 22px;   /* cards */
  --radius-xl: 28px;   /* sheets, hero panels, device frames */
  --radius-full: 999px;/* buttons, chips, pills, toggles */

  /* ---------- Elevation (flat glass at rest; light from above) ---------- */
  --elev-0: none;
  --elev-hover: 0 20px 50px -24px rgba(45, 111, 255, .55);
  --elev-pop: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 40px -12px rgba(2, 4, 14, .85), 0 0 0 1px var(--line-700);
  --elev-sheet: 0 -24px 60px -20px rgba(2, 4, 14, .9), 0 0 0 1px var(--line-700);
  --metal-primary: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 4px rgba(5, 8, 26, .45), 0 0 0 1px rgba(45, 111, 255, .5), 0 10px 26px -12px rgba(45, 111, 255, .75);
  --metal-secondary: inset 0 1px 0 rgba(79, 195, 247, .28), inset 0 -2px 4px rgba(5, 8, 26, .5), 0 0 0 1px rgba(79, 195, 247, .28);
  --blur-glass: 18px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* every enter and state change */
  --ease-press: cubic-bezier(.34, 1.56, .64, 1);  /* press release, toggle thumbs, approve check */
  --ease-move: cubic-bezier(.65, 0, .35, 1);      /* on-screen moves (sheet drag settle, reorder) */
  --ease-linear: linear;                          /* progress and shimmer only */
  --dur-instant: 0ms;     /* keyboard actions, command palette, tab switch */
  --dur-press: 140ms;     /* press scale and hover colour */
  --dur-fast: 180ms;      /* chips, toggles, tooltips, popovers */
  --dur-base: 240ms;      /* cards, toasts, row state */
  --dur-sheet: 320ms;     /* sheets and modals enter (exit 220ms) */
  --dur-exit: 160ms;      /* default exit, about 70% of enter */
  --dur-page: 280ms;      /* view transition between pages */
  --dur-tick: 900ms;      /* number tickers, once on load */
  --dur-shimmer: 1400ms;  /* skeleton loop */
  --dur-sheen: 2200ms;    /* live lane sheen loop */
  --stagger: 40ms;        /* per list item, capped at 8 items */
  --press-scale: .97;

  /* ---------- Layout ---------- */
  --sidebar-w: 248px;
  --rail-w: 76px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --content-max: 1280px;
  --measure: 68ch;

  /* ---------- Z scale ---------- */
  --z-base: 0; --z-sticky: 10; --z-nav: 20; --z-sheet: 40; --z-modal: 50; --z-palette: 60; --z-toast: 70; --z-grain: 80;
}

/* Solid surfaces when transparency is reduced or backdrop-filter is missing */
@media (prefers-reduced-transparency: reduce) {
  :root { --surface-card: var(--navy-800); --surface-overlay: rgba(5, 8, 26, .92); --blur-glass: 0px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface-card: var(--navy-800); }
}

/* Reduced motion: keep opacity and colour, drop movement and scale */
@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; --stagger: 0ms; --dur-tick: 0ms; --dur-sheen: 0ms; }
}

/* Increased contrast: lift hairlines and dim text */
@media (prefers-contrast: more) {
  :root { --line: var(--slate-400); --line-soft: var(--line-700); --text-dim: var(--mist-300); --text-muted: var(--frost-100); }
}