/*
 * ClinRail blue system: design tokens. Prototype, 2026-10-02.
 * Composition after Crextio (primary), Movra (agency view) and a soft medical
 * dashboard (icon rail, pastel data colours). Crextio's yellow is replaced by blue.
 * Neutrals: "Clinical Soft Blue", supplied by the user.
 *
 * Product name renders from --product-name (branding.product_name).
 * Font: Urbanist (Corey Hu), SIL Open Font License 1.1, via Google Fonts.
 * Rule: weight 300 only at 32px and above. Reading text 16px or larger.
 */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600&display=swap");

:root {
  --product-name: "ClinRail";

  /* Canvas and neutrals (Clinical Soft Blue). Never used for text. */
  --mist-50: #F0F5F6;   /* canvas */
  --mist-100: #E0ECED;
  --mist-200: #D1E2E5;
  --mist-300: #C1D9DC;
  --mist-400: #B2CFD3;  /* tracks, dividers, chart backgrounds */
  --canvas-end: #DCE7F7;

  /* Canvas: a diagonal wash, cool grey top left into mist and faint blue.
     Darkest stops (#C1D9DC, #C3D5F1) are the contrast baseline. */
  --canvas-stop-1: #E4E9EC;  /* top left, cool grey (Crextio #E2E3E5) */
  --canvas-stop-2: #F0F5F6;  /* light band, mist-50 */
  --canvas-stop-3: #D1E2E5;  /* mist-200, lower middle */
  --canvas-stop-4: #D3E1F6;  /* faint blue, upper right */
  --canvas-stop-5: #C3D5F1;  /* deeper blue, bottom right */
  --canvas-stop-6: #C1D9DC;  /* mist-300, bottom left */
  --canvas:
    radial-gradient(90% 95% at 104% 106%, var(--canvas-stop-5) 0%, rgba(195, 213, 241, 0) 66%),
    radial-gradient(75% 75% at 98% 4%, var(--canvas-stop-4) 0%, rgba(211, 225, 246, 0) 72%),
    radial-gradient(60% 65% at -4% 104%, var(--canvas-stop-6) 0%, rgba(193, 217, 220, 0) 70%),
    linear-gradient(155deg, var(--canvas-stop-1) 0%, var(--canvas-stop-2) 38%, var(--canvas-stop-3) 78%, var(--canvas-stop-4) 100%);

  /* Surfaces: translucent white over the wash. No solid white cards. */
  --surface: #FFFFFF;                          /* reserved: never a card fill */
  --glass-1: rgba(255, 255, 255, 0.42);        /* default card (Crextio #E2E3E2, #E7E6DF) */
  --glass-2: rgba(255, 255, 255, 0.60);        /* stronger card: calendar, KPI tiles (Crextio #F8F7EF) */
  --glass-3: rgba(255, 255, 255, 0.70);        /* nested: chips, inner rows, arrow buttons, capsule nav */
  --glass-blue: rgba(227, 236, 255, 0.80);     /* tinted banner */
  --glass-blur: blur(22px) saturate(1.15);
  --rim: inset 0 0 0 1px rgba(255, 255, 255, 0.60);   /* light edge */
  --rim-top: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-soft: 0 20px 50px rgba(15, 30, 43, 0.06);  /* wide, very soft */
  --shadow-card: var(--rim), var(--rim-top), var(--shadow-soft);

  /* Text */
  --ink: #0F1E2B;        /* 15.4:1 on mist-50, 16.9:1 on white */
  --ink-muted: #4A5B68;  /* 4.76:1 on darkest canvas, 5.65:1 on a 0.42 card over it */

  /* Blue accent (replaces Crextio's yellow) */
  --blue-glow: #3563D2;  /* highlight inside the profile card; white text 5.43:1 */
  --blue-700: #244CA8;   /* hover; profile field. White 7.85:1 */
  --blue-600: #2F5FD0;   /* primary actions, active states, ring arc. White 5.72:1 */
  --blue-300: #A9C7FF;   /* highlight fill, always under ink text (9.9:1) */
  --blue-100: #E3ECFF;   /* soft fills */

  /* Charcoal (Crextio's dark card) */
  --charcoal: #1B2430;          /* white 15.7:1 */
  --charcoal-2: #2A3542;        /* raised element on charcoal */
  --on-charcoal: #FFFFFF;
  --on-charcoal-muted: #9FB0BE; /* 7.0:1 */

  /* Data pastels: charts and segments only, never text */
  --pastel-lavender: #B9C0F5;
  --pastel-sky: #9CC7F2;
  --pastel-mint: #A8D8A8;
  --pastel-apricot: #F6C48A;

  /* Semantic status: always icon + label */
  /* Darkened so text passes AA on the darkest canvas stop (#C1D9DC) */
  --success: #145E39;  /* 5.24:1 darkest canvas */
  --warning: #7A4900;  /* 5.12:1 darkest canvas */
  --danger: #A11F15;   /* 5.23:1 darkest canvas */
  --info: #244CA8;     /* blue-700 for text; blue-600 stays the fill */
  --link: #244CA8;

  /* Lines */
  --line: var(--mist-200);
  --line-dash: var(--mist-400);
  --line-control: var(--ink-muted);   /* outline pills, 5.6:1 on a card */
  --tick: rgba(74, 91, 104, 0.45);     /* ring tick marks (decorative) */

  /* Type */
  --font: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-light: 300;     /* 32px and above only */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-numeral-xl: 76px;  /* KPI numerals, light */
  --fs-display: 64px;     /* greeting, light */
  --fs-numeral-l: 52px;   /* card numerals, light */
  --fs-numeral-m: 44px;   /* ring centre, KPI tiles, light */
  --fs-h1: 40px;          /* page title, regular */
  --fs-title: 28px;       /* card title, regular */
  --fs-subtitle: 22px;    /* sub-card title, regular */
  --fs-body-l: 18px;      /* list titles, medium */
  --fs-body: 16px;        /* reading text */
  --fs-small: 14px;       /* metadata floor */
  --lh-tight: 1.05;
  --lh-title: 1.15;
  --lh-body: 1.45;

  /* Space (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radii */
  --r-card: 30px;     /* cards */
  --r-inner: 20px;    /* objects inside cards */
  --r-chip: 16px;     /* calendar events */
  --r-tile: 14px;     /* icon-rail tiles */
  --r-pill: 999px;    /* nav pills, buttons, segments */

  /* Elevation: soft, never heavy (card shadow is defined with the surfaces) */
  --shadow-float: var(--rim), 0 16px 40px rgba(15, 30, 43, 0.12);
  --shadow-dark: 0 -10px 0 -4px rgba(27, 36, 48, 0.30), 0 -20px 0 -10px rgba(27, 36, 48, 0.14);

  color-scheme: light;
}

/* Dark theme values (provided; not rendered in this round) */
:root[data-theme="dark"] {
  --glass-1: rgba(24, 34, 45, 0.55); --glass-2: rgba(24, 34, 45, 0.72); --glass-3: rgba(36, 48, 62, 0.80); --glass-blue: rgba(26, 39, 66, 0.85);
  --rim: inset 0 0 0 1px rgba(255, 255, 255, 0.08); --rim-top: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --mist-50: #10171C; --mist-100: #16202A; --mist-200: #223040; --mist-300: #2C3C4E; --mist-400: #3A4D60;
  --canvas-end: #111B2B; --surface: #18222D;
  --ink: #EAF1F6; --ink-muted: #A9B8C4;
  --blue-700: #A9C7FF; --blue-600: #7EA4F2; --blue-300: #2E4F96; --blue-100: #1A2742;
  --charcoal: #0B1017; --charcoal-2: #18212C;
  --success: #6CCB98; --warning: #E2B54F; --danger: #FF9C8F; --info: #7EA4F2;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-1: rgba(24, 34, 45, 0.55); --glass-2: rgba(24, 34, 45, 0.72); --glass-3: rgba(36, 48, 62, 0.80); --glass-blue: rgba(26, 39, 66, 0.85);
    --rim: inset 0 0 0 1px rgba(255, 255, 255, 0.08); --rim-top: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --mist-50: #10171C; --mist-100: #16202A; --mist-200: #223040; --mist-300: #2C3C4E; --mist-400: #3A4D60;
    --canvas-end: #111B2B; --surface: #18222D;
    --ink: #EAF1F6; --ink-muted: #A9B8C4;
    --blue-700: #A9C7FF; --blue-600: #7EA4F2; --blue-300: #2E4F96; --blue-100: #1A2742;
    --charcoal: #0B1017; --charcoal-2: #18212C;
    --success: #6CCB98; --warning: #E2B54F; --danger: #FF9C8F; --info: #7EA4F2;
    color-scheme: dark;
  }
}