/* ============================================================================
   SYCOMP AI PATCH CENTER · COLOR TOKENS (ucsf-rhyme v1.0)
   ----------------------------------------------------------------------------
   A SaaS color-token system derived from the official UCSF brand palette.
   Source of truth : https://identity.ucsf.edu/brand-guide/color
                     https://identity.ucsf.edu/print-digital/digital-colors
   Method          : Every official UCSF hex is preserved verbatim as a ramp
                     anchor (marked "UCSF <code>"). Missing steps generated by
                     piecewise OKLCH interpolation on a canonical lightness
                     axis, gamut-mapped to sRGB.
   Why it coheres  : UCSF Navy (#052049), CTA Blue (#006BE9) and the neutral
                     grays all sit on the same OKLCH hue line (~258°). The
                     neutral ramp therefore converges on Navy at step 950, and
                     the action ramp deepens toward Navy — the whole UI shares
                     one spine.
   Accessibility   : Every semantic pairing below verified WCAG 2.1 AA
                     (contrast ratios in comments). Theming uses light-dark()
                     — Baseline since mid-2024.
   Layers          : 1. Primitives  2. Semantic  3. Component hints
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 0 · THEME SWITCHING                                                */
/* ------------------------------------------------------------------ */
:root                { color-scheme: light dark; } /* follow OS by default */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

:root {

/* ------------------------------------------------------------------ */
/* 1 · PRIMITIVES                                                     */
/* ------------------------------------------------------------------ */

/* Official one-off values (verbatim) ------------------------------- */
--ucsf-navy:              #052049;  /* A1 UCSF Navy — brand anchor        */
--ucsf-cta-blue:          #006BE9;  /* A3 CTA Blue — digital actions      */
--ucsf-link-legacy:       #0071AD;  /* universal hyperlink (digital guide)*/
--ucsf-interactive-teal:  #058488;  /* digital formula, AA on white       */
--ucsf-interactive-red:   #EB093C;  /* digital formula                    */
--ucsf-interactive-orange:#F26D04;  /* digital formula, large text only   */
--ucsf-interactive-green: #6EA400;  /* digital formula, large text only   */
--chartreuse:             #84C234;  /* E3 Chartreuse — charts/accents     */
--chartreuse-light:       #B4DC55;  /* E4 Point Reyes                     */

/* GRAY · cool neutral, converges on UCSF Navy at 950 --------------- */
--gray-50:  #F7F8FA;
--gray-100: #F2F3F4;  /* UCSF I6            */
--gray-200: #E1E3E5;  /* UCSF J5            */
--gray-300: #D1D3D3;  /* UCSF K3 Gray       */
--gray-400: #B4B9BF;  /* UCSF J3 Cool Gray  */
--gray-500: #878D96;  /* UCSF J2            */
--gray-600: #657388;
--gray-700: #506380;  /* UCSF I3 Blue Gray  */
--gray-800: #354B6D;
--gray-900: #1C345A;
--gray-950: #052049;  /* UCSF A1 Navy       */

/* BLUE · action ramp built around CTA Blue ------------------------- */
--blue-50:  #F0F6FF;
--blue-100: #DBEAFF;
--blue-200: #BFD9FF;
--blue-300: #9EC4FC;
--blue-400: #6CA3F6;
--blue-500: #006BE9;  /* UCSF A3 CTA Blue   */
--blue-600: #0C5BCC;
--blue-700: #0F51B8;
--blue-800: #1044A1;
--blue-900: #0F388A;  /* UCSF A2            */
--blue-950: #002262;

/* SKY · informational blue (B family) ------------------------------ */
--sky-50:  #F0FAFE;
--sky-100: #E2F4FC;  /* UCSF B6            */
--sky-200: #B8E6FA;  /* UCSF B5            */
--sky-300: #9AD4F0;
--sky-400: #6DB9E1;
--sky-500: #178CCB;  /* UCSF B3 Blue       */
--sky-600: #0071AD;  /* UCSF hyperlink     */
--sky-700: #006095;
--sky-800: #004B79;
--sky-900: #00375D;
--sky-950: #002746;

/* TEAL · signature accent (C family) ------------------------------- */
--teal-50:  #EFFAFB;
--teal-100: #E1F4F6;
--teal-200: #CDECF0;
--teal-300: #B4E2E8;  /* UCSF C5            */
--teal-400: #60D0DA;  /* UCSF C4            */
--teal-500: #16A0AC;  /* UCSF C3 Teal       */
--teal-600: #14828C;  /* UCSF C2            */
--teal-700: #126C74;
--teal-800: #0E5258;  /* UCSF C1            */
--teal-900: #003D43;
--teal-950: #002C30;

/* GREEN · success (D family) --------------------------------------- */
--green-50:  #F1F9F0;
--green-100: #E0F1DF;
--green-200: #C9E6C9;
--green-300: #ADD8AD;
--green-400: #82C384;
--green-500: #32A03E;  /* UCSF D3 Green      */
--green-600: #118543;
--green-700: #007242;  /* UCSF D2            */
--green-800: #005C41;
--green-900: #00483A;  /* UCSF D1            */
--green-950: #003027;

/* PURPLE · (F family) ---------------------------------------------- */
--purple-50:  #F5F5FE;
--purple-100: #E7E8F9;
--purple-200: #D5D6F3;
--purple-300: #C0C0EA;  /* UCSF F5           */
--purple-400: #8A8CE3;  /* UCSF F4 Yosemite  */
--purple-500: #6C62D0;  /* UCSF F3 Purple    */
--purple-600: #5C53B5;
--purple-700: #514AA2;
--purple-800: #443E8C;  /* UCSF F2           */
--purple-900: #2E2872;  /* UCSF F1           */
--purple-950: #201958;

/* VIOLET · (G family) ---------------------------------------------- */
--violet-50:  #FBF5FD;
--violet-100: #F7EBFA;
--violet-200: #F1DDF5;
--violet-300: #EACCF0;  /* UCSF G5           */
--violet-400: #C45ED8;  /* UCSF G4           */
--violet-500: #A238BA;  /* UCSF G3 Violet    */
--violet-600: #812C95;
--violet-700: #6C247C;  /* UCSF G2           */
--violet-800: #591E66;
--violet-900: #461850;  /* UCSF G1           */
--violet-950: #370F40;

/* MAGENTA · (H family) --------------------------------------------- */
--magenta-50:  #FEF4F9;
--magenta-100: #FBE7F2;
--magenta-200: #F8D7E9;
--magenta-300: #F2C2DE;  /* UCSF H5          */
--magenta-400: #E266AE;  /* UCSF H4          */
--magenta-500: #C42882;  /* UCSF H3 Magenta  */
--magenta-600: #9C2068;
--magenta-700: #821A56;  /* UCSF H2          */
--magenta-800: #6C1547;
--magenta-900: #561038;  /* UCSF H1          */
--magenta-950: #43072A;

/* RED · danger (N3) ------------------------------------------------ */
--red-50:  #FFF3F3;
--red-100: #FFE2E2;
--red-200: #FFCBCC;
--red-300: #FFADB0;
--red-400: #F97F87;
--red-500: #E61048;  /* UCSF N3 Red        */
--red-600: #BF003A;
--red-700: #A40031;
--red-800: #840027;
--red-900: #65001C;
--red-950: #4C0013;

/* ORANGE · (M3) ---------------------------------------------------- */
--orange-50:  #FFF5F0;
--orange-100: #FFE9E0;
--orange-200: #FFDACA;
--orange-300: #FFC6AD;
--orange-400: #FFA67E;
--orange-500: #FA6E1E;  /* UCSF M3 Orange     */
--orange-600: #CD5511;
--orange-700: #AF4407;
--orange-800: #8A3100;
--orange-900: #662000;
--orange-950: #481300;

/* AMBER · warning (L3 at 400) -------------------------------------- */
--amber-50:  #FFF7E7;
--amber-100: #FEEECE;
--amber-200: #FEE2AC;
--amber-300: #FED27F;
--amber-400: #FEB80A;  /* UCSF L3 Yellow     */
--amber-500: #D08E00;
--amber-600: #AB7000;
--amber-700: #925C00;
--amber-800: #744500;
--amber-900: #563000;
--amber-950: #3D1F00;

/* Dark-theme surface extensions (deeper than Navy) ------------------ */
--navy-canvas: #04122B;   /* app background, dark  */
--navy-raised: #172F53;   /* raised card, dark     */
--navy-selected: #081E40; /* selected row, dark    */
--navy-border: #192A45;   /* hairline, dark        */

/* ------------------------------------------------------------------ */
/* 2 · SEMANTIC TOKENS  ·  light-dark(light, dark)                    */
/*     Contrast ratios (WCAG 2.1) noted as  L:light  D:dark           */
/* ------------------------------------------------------------------ */

/* Backgrounds */
--bg-canvas:        light-dark(var(--gray-50),   var(--navy-canvas));
--bg-surface:       light-dark(#FFFFFF,          var(--ucsf-navy));     /* dark surface IS UCSF Navy */
--bg-surface-raised:light-dark(#FFFFFF,          var(--navy-raised));
--bg-sunken:        light-dark(var(--gray-100),  var(--navy-canvas));
--bg-hover:         light-dark(var(--gray-100),  var(--navy-selected));
--bg-selected:      light-dark(var(--blue-50),   var(--navy-selected));
--bg-brand:         var(--ucsf-navy);                                   /* topbar/sidebar, both themes */
--bg-inverse:       light-dark(var(--ucsf-navy), var(--gray-100));

/* Text */
--text-primary:     light-dark(var(--gray-950),  var(--gray-100));  /* L 16.04 · D 16.78 */
--text-secondary:   light-dark(var(--gray-700),  var(--gray-300));  /* L 6.11  · D 12.40 */
--text-muted:       light-dark(var(--gray-600),  var(--gray-400));  /* L 4.82  · D 8.12  */
--text-disabled:    light-dark(var(--gray-400),  var(--gray-600));
--text-inverse:     light-dark(#FFFFFF,          var(--gray-950));
--text-on-brand:    var(--gray-100);                                /* on --bg-brand · 14.44 */
--text-on-action:   #FFFFFF;                                        /* on action blue · 4.91 */

/* Borders */
--border-subtle:    light-dark(var(--gray-200),  var(--navy-border));
--border-default:   light-dark(var(--gray-300),  var(--gray-800));
--border-strong:    light-dark(var(--gray-500),  var(--gray-600));  /* inputs: L 3.34 · D 3.87 vs bg */
--border-focus:     light-dark(var(--blue-500),  var(--blue-400));

/* Action (buttons, links) */
--action-primary:        var(--blue-500);                            /* white text · 4.91 */
--action-primary-hover:  light-dark(var(--blue-600), var(--blue-400)); /* 6.21 white text (light) */
--action-primary-active: var(--blue-700);                            /* 7.27 */
--action-subtle-bg:      light-dark(var(--blue-50),  var(--navy-selected));
--action-subtle-text:    light-dark(var(--blue-600), var(--blue-300));
--link:                  light-dark(var(--blue-500), var(--blue-400)); /* L 4.91 · D 7.29 */
--link-hover:            light-dark(var(--blue-700), var(--blue-300));
--link-on-tinted:        light-dark(var(--blue-600), var(--blue-300)); /* use on gray-100+ panels · 5.59 */
--focus-ring:            light-dark(var(--blue-500), var(--blue-400));
--focus-ring-offset:     var(--bg-surface);

/* Accent (highlights, active nav, brand moments) */
--accent:           light-dark(var(--teal-500),  var(--teal-400));
--accent-text:      light-dark(var(--teal-600),  var(--teal-300));  /* L 4.56 (UCSF C2) · D 11.44 */
--accent-bg:        light-dark(var(--teal-50),   #0B3A44);
--accent-solid-text:var(--ucsf-navy);                               /* navy on teal-500 · 5.09 */

/* Status · success */
--success-text:     light-dark(var(--green-700), var(--green-400)); /* L 6.02 · D 8.95 */
--success-bg:       light-dark(var(--green-50),  #0A2E22);
--success-border:   light-dark(var(--green-200), var(--green-800));
--success-solid:    var(--green-700);                               /* white text · 6.02 */

/* Status · warning  (solid pairs with Navy text — official UCSF pairing, 9.22) */
--warning-text:     light-dark(var(--amber-800), var(--amber-400)); /* L 8.10 · D 10.72 */
--warning-bg:       light-dark(var(--amber-50),  #33270A);
--warning-border:   light-dark(var(--amber-200), var(--amber-800));
--warning-solid:    var(--amber-400);
--warning-on-solid: var(--ucsf-navy);

/* Status · danger */
--danger-text:      light-dark(var(--red-600),   var(--red-400));   /* L 6.41 · D 7.47 */
--danger-bg:        light-dark(var(--red-50),    #3A0E18);
--danger-border:    light-dark(var(--red-200),   var(--red-800));
--danger-solid:     var(--red-500);                                 /* white text · 4.63 */
--danger-solid-hover: var(--red-600);                               /* 6.41 */

/* Status · info */
--info-text:        light-dark(var(--sky-600),   var(--sky-300));   /* L 5.30 (UCSF hyperlink) */
--info-bg:          light-dark(var(--sky-50),    #062A3E);
--info-border:      light-dark(var(--sky-200),   var(--sky-800));
--info-solid:       var(--sky-600);

/* Charts · categorical (UCSF hue wheel, adjacent-hue separated) */
--chart-1: var(--blue-500);
--chart-2: var(--teal-500);
--chart-3: var(--violet-500);
--chart-4: var(--orange-500);
--chart-5: var(--green-500);
--chart-6: var(--magenta-500);
--chart-7: var(--purple-500);
--chart-8: var(--chartreuse);
--chart-grid:  light-dark(var(--gray-200), var(--navy-border));
--chart-label: var(--text-muted);

}