/* Design tokens. Colour values follow Glide UI Standards V1, style-set
   Petunia (product team, 2026-09-21), including its AA overrides. The alias
   names below are what components use; the values map onto the Petunia
   primitives so the standards can be swapped in without touching app.css.
   Surfaces, faces and edges match PharmaOS (DT-pharma-coding-agent,
   web/src/styles.css) so the two products read as one family. The brand
   gradient, the acrylic and the motion are CancerOS's own; the standards
   leave gradients, radius and elevation out of scope. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@1,18..72,400;1,18..72,500&display=swap");

:root {
  /* Brand gradient: decorative only */
  --brand-indigo: #758DFA;
  --brand-blue:   #6BB4F7;
  --brand-cyan:   #75E7EF;
  --brand-gradient: linear-gradient(105deg, #758DFA 0%, #6BB4F7 48%, #75E7EF 100%);
  --brand-gradient-soft: linear-gradient(105deg, #ECEFFE 0%, #EAF4FE 50%, #EAFBFD 100%);
  /* Avatar fills: pale mixes of the brand indigo, blue, cyan and the mesh
     violet. Text on them is --blue-850 (above 7:1 on every one). */
  --avatar-0: linear-gradient(135deg, #DCE2FE 0%, #CFE6FD 100%);
  --avatar-1: linear-gradient(135deg, #D3EEFD 0%, #D2F6F9 100%);
  --avatar-2: linear-gradient(135deg, #E6DCFE 0%, #DCE2FE 100%);
  --avatar-3: linear-gradient(135deg, #D2F6F9 0%, #DCE2FE 100%);
  --avatar-4: linear-gradient(135deg, #EDE3FE 0%, #D3EEFD 100%);
  --avatar-5: linear-gradient(135deg, #CFE6FD 0%, #E6DCFE 100%);

  /* Ink = Petunia Neutral ramp. Step names kept; values are Neutral950..50. */
  --ink-900: #111315;   /* Neutral950 */
  --ink-800: #272B30;   /* Neutral900 */
  --ink-700: #35383B;   /* Neutral800 */
  --ink-600: #45484D;   /* Neutral700 */
  --ink-500: #606469;   /* Neutral600 */
  --ink-400: #76767C;   /* Neutral500 */
  --ink-300: #95999D;   /* Neutral400 */
  --ink-200: #CBCCCE;   /* Neutral300 */
  --ink-150: #E6E6E7;   /* Neutral200 */
  --ink-100: #F3F3F3;   /* Neutral100 */
  --ink-50:  #FCFCFC;   /* Neutral50 */
  --white:   #FFFFFF;   /* Neutral0 */

  /* Accent = Petunia Blue. Primary action, selection, focus, links. */
  --accent-700: #1F3DB3;   /* Blue800: hovered primary, pressed link, selected text */
  --accent-600: #2F56E6;   /* Blue700: primary bold, link, focus, selected border */
  --accent-500: #2F56E6;   /* Blue700 (was a lighter indigo; 500 fails on white) */
  --accent-400: #4D76F0;   /* Blue600: perceivable accent border */
  --accent-300: #AFCBFF;   /* Blue300: selected pressed */
  --accent-200: #C1D7FF;   /* Blue250: spinner track, soft accent edge */
  --accent-100: #D1E3FF;   /* Blue200: selected hovered */
  --accent-50:  #E6F0FF;   /* Blue100: selected */

  /* Sky, a categorical accent with no meaning. */
  --cyan-600: #137896;   /* Sky850: text on faint */
  --cyan-500: #1D90B3;   /* Sky800: perceivable border/icon */
  --cyan-100: #E6FCFF;   /* Sky100 */

  /* Semantic, with the AA overrides from the standards applied. */
  --success-600: #347432;   /* Green850: text on success/faint */
  --success-500: #4AA657;   /* Green700: icon and border (3:1, graphic only) */
  --success-100: #EEFDE5;   /* Green100 */
  --warning-600: #BA4109;   /* Orange900: text on warning/faint */
  --warning-500: #EF6B1A;   /* Orange800: icon and border */
  --warning-100: #FFF3E8;   /* Orange100 */
  --danger-600:  #B2111A;   /* Red800: text on danger/faint */
  --danger-500:  #D32F2F;   /* Red700: danger bold, icon */
  --danger-100:  #FFEDEB;   /* Red100 */
  --danger-50:   var(--danger-100);
  /* Lozenges: {status}.faint fill (200) and {status}.subtle edge (300). */
  --success-200: #D7F2D3; --success-300: #AFE4AE;
  --warning-200: #FFE9C8; --warning-300: #FDBD85;
  --danger-200:  #FFD6D3; --danger-300:  #FA958E;

  /* PharmaOS surfaces: warm parchment chrome over a white canvas. Same
     names and values as PharmaOS so the two products share one set. Not
     part of Petunia; the standards have no warm neutral. Decorative edges
     only: the cream borders sit near 1.2:1 and never carry meaning. */
  --cream-50: #FAF8F4; --cream-100: #F3F0E9; --cream-200: #F2EFE8; --cream-300: #ECE7DE;
  --cream-border: #E8E3D9; --cream-border-soft: #EFEBE3; --cream-border-input: #DFD9CD; --cream-border-strong: #EAE5DB;
  --blue-850: #183099;

  /* Aliases. Text steps are the standards' text / text.subtle / text.faint. */
  --bg-app: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--cream-100);
  --surface-faint: var(--cream-50);     /* row and field hover, quiet panels */
  --surface-hover: var(--cream-200);    /* button and menu hover */
  --surface-pressed: var(--cream-300);  /* pressed, selected nav item */
  --wash: var(--cream-50);
  --surface-glass: rgba(255, 255, 255, 0.66);
  --surface-inverse: var(--ink-900);
  --text-strong: var(--ink-900);        /* Neutral950, color.text */
  --text: var(--text-strong);
  --text-body: var(--ink-700);          /* Neutral800, color.text.subtle */
  --text-muted: var(--ink-600);         /* Neutral700, color.text.faint (9.18:1) */
  --text-subtle: var(--ink-500);        /* Neutral600 (5.96:1); was Neutral500-ish at 4.5 */
  --text-emphasis: var(--accent-600);   /* Blue700, color.text.primary */
  --text-on-inverse: #F3F3F3;           /* Neutral100 on dark acrylic */
  --border-subtle: var(--cream-border); /* decorative edges only */
  --border-default: var(--ink-300);     /* Neutral400 */
  --border-input: var(--ink-400);       /* Neutral500, color.border.input (4.51:1) */

  /* Type */
  /* PharmaOS faces. Newsreader stays for the one italic brand phrase. */
  --font-display: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-body: var(--font-sans);
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;
  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;
  --ls-tight: -0.02em;
  --ls-overline: 0.14em;

  /* Effects */
  /* Warm, like PharmaOS's rgba(60, 50, 30) card shadow, so depth reads as
     paper rather than blue glass. */
  --shadow-xs: 0 1px 2px rgba(60, 50, 30, 0.05);
  --shadow-sm: 0 2px 6px rgba(60, 50, 30, 0.06);
  --shadow-md: 0 6px 20px rgba(60, 50, 30, 0.08);
  --shadow-lg: 0 18px 48px rgba(60, 50, 30, 0.12);
  --sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Focus: the standards' two-tone ring, 2px Blue700 with a 2px gap in the
     element's own background, drawn as two box-shadows so it survives
     border-radius. Readable on white and on a Blue700 primary button. */
  --ring-focus: 0 0 0 2px var(--white), 0 0 0 4px var(--accent-600);
  --blur-glass: 14px;
  /* Acrylic: a strong blur tinted with cream, fading to white. Light for
     panels that hold text; dark for callouts and toasts. Both keep enough
     fill for AA text on top whatever sits behind. */
  --acrylic-blur: blur(28px) saturate(1.8);
  --acrylic-light: linear-gradient(135deg, rgba(250, 248, 244, 0.80) 0%, rgba(252, 251, 248, 0.74) 55%, rgba(255, 255, 255, 0.72) 100%);
  --acrylic-light-strong: linear-gradient(135deg, rgba(250, 248, 244, 0.92) 0%, rgba(252, 251, 248, 0.90) 55%, rgba(255, 255, 255, 0.88) 100%);
  --acrylic-dark: linear-gradient(135deg, rgba(31, 61, 179, 0.80) 0%, rgba(17, 19, 21, 0.82) 70%);
  --acrylic-edge: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  --acrylic-shadow: 0 12px 36px rgba(60, 50, 30, 0.10), 0 2px 8px rgba(17, 19, 21, 0.06);
  --scrim-blur: blur(6px) saturate(1.2);
  /* The washes are PharmaOS's cream-to-white fades with the brand orbs
     kept faint behind them. --wash-hero is the login page's. */
  --wash-hero:
    radial-gradient(60% 80% at 82% 18%, rgba(117, 141, 250, 0.10) 0%, rgba(117, 141, 250, 0) 60%),
    radial-gradient(50% 70% at 12% 92%, rgba(117, 231, 239, 0.10) 0%, rgba(117, 231, 239, 0) 62%),
    linear-gradient(180deg, #F7F4EE 0%, #FCFAF7 42%, #FFFFFF 100%);
  --wash-soft:
    radial-gradient(70% 90% at 90% 10%, rgba(107, 180, 247, 0.06) 0%, rgba(107, 180, 247, 0) 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);
  /* The chat stage carries the wash across its whole height, so it is drawn
     once on the stage rather than on the scrolling body. A touch deeper than
     --wash-soft because it has to read across a tall column. */
  --wash-stage:
    radial-gradient(64% 58% at 88% 4%, rgba(107, 180, 247, 0.10) 0%, rgba(107, 180, 247, 0) 62%),
    radial-gradient(52% 46% at 6% 96%, rgba(117, 141, 250, 0.07) 0%, rgba(117, 141, 250, 0) 64%),
    linear-gradient(180deg, #FFFFFF 0%, #FCFAF7 62%, #F7F4EE 100%);
  --wash-inverse:
    radial-gradient(60% 80% at 80% 10%, rgba(117, 141, 250, 0.22) 0%, rgba(117, 141, 250, 0) 55%),
    radial-gradient(50% 60% at 10% 100%, rgba(117, 231, 239, 0.14) 0%, rgba(117, 231, 239, 0) 60%),
    #0E0F13;

  /* Spacing and radii */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}