/* Rayon design tokens — the only file allowed to contain raw color values. */

:root {
  /* ---- Color: sidebar ---- */
  --sidebar-top: #0D2439;
  --sidebar-bottom: #0D2439;
  --sidebar-text: #FFFFFF;

  /* ---- Color: brand ---- */
  --primary: #1D6FF2;
  --primary-hover: #155FD6;

  /* ---- Color: surfaces ---- */
  --canvas: #F9FCFE;
  --surface: #FFFFFF;
  --border: #E4EAF2;
  --border-input: #D8E2F0;

  /* ---- Color: text ---- */
  --heading: #0F2A4D;
  --body: #334966;
  --muted: #7A8CA3;

  /* ---- Color: accents + tints ---- */
  --blue-tint: #E8F1FE;
  --green: #12A45A;
  --green-tint: #E6F7EE;
  --amber: #D98B0B;
  --amber-tint: #FDF3E1;
  --red: #E1394F;
  --red-tint: #FDECEE;
  --purple: #6D4AE0;
  --purple-tint: #EDE9FE;
  --slate: #64748B;
  --slate-tint: #EEF2F7;

  /* ---- Color: chrome ---- */
  --search-bg: #F4F7FB;
  --search-border: #E3EAF3;
  --selected-fill: #F0F6FF;

  /* ---- GEO detail mockup palette ---- */
  --geo-surface: #FEFEFE;
  --geo-heading: #000084;
  --geo-primary: #0055FD;
  --geo-body: #00106A;
  --geo-muted: #57699F;
  --geo-detail: #3757AE;
  --geo-border: #E5EEFB;
  /* The ground a plan panel sits on. Step cards keep --geo-surface, so a
   * card reads as a card against it; 1.07:1 against that white, which is
   * the preview page's own ground/surface step. */
  --geo-panel-tint: #F2F7FD;
  --geo-blue-tint: #E5F1FE;
  --geo-red: #F40000;
  --geo-red-tint: #FBEDF0;
  --geo-green: #008D23;
  --geo-green-tint: #DFF4E8;
  --geo-amber: #FEB500;
  --geo-track: #EDF5FD;
  --geo-slate: #5E6B85;
  --geo-slate-tint: #E8EDF5;
  --geo-logo: #111111;
  --geo-scroll-thumb: #ACB5CB;

  /* ---- Derived neutrals (no new hues) ---- */
  --disabled-fill: #E9EEF5;
  --disabled-text: #A6B4C6;
  --track: #E9EEF5;

  /* ---- Type ---- */
  --font-sans: Arial, Helvetica, sans-serif;

  --fs-page-title: 33px;
  --fs-section: 17px;
  --fs-kpi: 28px;
  --fs-body: 14px;
  --fs-caption: 12.5px;
  --fs-pill: 11.5px;
  --fs-nav: 14px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-base: 1.45;
  --lh-tight: 1.25;

  /* ---- Radius ---- */
  --r-pill: 999px;
  --r-control: 8px;
  --r-card: 12px;
  --r-row: 10px;
  --r-logo: 7px;

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  /* ---- Layout ---- */
  --sidebar-w: 209px;
  --rail-w: 360px;
  --topbar-h: 54px;

  /* ---- Elevation (essentially flat) ---- */
  --shadow-card: 0 1px 2px rgba(16, 40, 80, .04);

  /* ---- Spec aliases (section 4.1 names; same values as the tokens above) ---- */
  --c-sidebar-top: #0C1D36;
  --c-sidebar-bottom: #0A1424;
  --c-primary: #1D6FF2;
  --c-primary-hover: #155FD6;
  --c-primary-tint: #E8F1FE;
  --c-canvas: #F4F8FC;
  --c-card: #FFFFFF;
  --c-border: #E4EAF2;
  --c-input-bg: #F4F7FB;
  --c-input-border: #E3EAF3;
  --c-heading: #0F2A4D;
  --c-body: #334966;
  --c-muted: #7A8CA3;
  --c-green: #12A45A;
  --c-green-tint: #E6F7EE;
  --c-amber: #D98B0B;
  --c-amber-tint: #FDF3E1;
  --c-red: #E1394F;
  --c-red-tint: #FDECEE;
  --c-purple: #6D4AE0;
  --c-purple-tint: #EDE9FE;
  --c-slate: #64748B;
  --c-slate-tint: #EEF2F7;
  --r-ctl: 8px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --w-sidebar: 208px;
  --w-rail: 360px;
  --h-topbar: 54px;
  --h-row: 48px;
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-title: 32px;

  /* ---- Color: email preview (mimics Gmail's light reading pane) ---- */
  --mail-surface: #fff;
  --mail-text: #202124;
  --mail-muted: #5f6368;
  --mail-border: #dadce0;
  --mail-divider: #e5e7eb;
}