/* ════════════════════════════════════════════════════════════════════════
   Ginja.Ai — Design Foundations: Color + Type
   ────────────────────────────────────────────────────────────────────────
   Single source of truth for the Ginja.Ai brand (v2, "green + orange").
   Ginja.Ai is an InsurTech platform for the East-African health-insurance
   market (formerly "Eden Care" — teal heritage now demoted to a secondary).

   Token tiers (never skip a tier when consuming):
     PRIMITIVE   raw ramp values        --green-500, --orange-700  (never use directly)
     SEMANTIC    role-based aliases     --content-strong, --bg-page, --status-danger
     COMPONENT   component-scoped       --button-bg → var(--action-primary)
     EC layer    shadcn-style tokens    --ec-primary, --ec-card, --ec-border, ...

   Fonts load from Google Fonts (all three families are freely hosted there).
   See README.md → VISUAL FOUNDATIONS for usage rules.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────────────────
     1 · BRAND ANCHORS
     ───────────────────────────────────────────────────────────────────── */
  --gj-green:  #00B050;   /* Ginja Green  — primary  */
  --gj-orange: #F45A18;   /* Ginja Orange — accent   */
  --gj-pink:   #FA97F1;   /* Primary 2    — illustration / playful accents */
  --gj-teal:   #00B6CF;   /* Secondary 1  — Eden Care heritage, supporting */
  --gj-ink:    #0D1117;   /* Marketing ink — near-black on light surfaces */

  /* ─────────────────────────────────────────────────────────────────────
     2 · PRIMITIVE RAMPS
     ───────────────────────────────────────────────────────────────────── */

  /* Ginja Green (anchored at 500 = #00B050) */
  --green-50:  #E0F6EA;
  --green-100: #B2E7CA;
  --green-200: #80D8A8;
  --green-300: #4CC884;
  --green-400: #29BD6C;
  --green-500: #00B050;
  --green-600: #009E48;
  --green-700: #00893E;
  --green-800: #007836;
  --green-900: #005D2A;

  /* Ginja Orange (anchored at 500 = #F45A18) */
  --orange-50:  #FEEBE3;
  --orange-100: #FCCEBA;
  --orange-200: #FAAC8C;
  --orange-300: #F78C5D;
  --orange-400: #F6743D;
  --orange-500: #F45A18;
  --orange-600: #DC5116;
  --orange-700: #BE4613;
  --orange-800: #A63D10;
  --orange-900: #81300D;

  /* Pink (Primary 2 · brand anchor #FA97F1 at step 200) */
  --pink-50:  #FEE7FB;
  --pink-100: #FCC2F6;
  --pink-200: #FA97F1;
  --pink-300: #F369EB;
  --pink-400: #E942DE;
  --pink-500: #DF0FD4;
  --pink-600: #CF09CF;
  --pink-700: #8A01CB;
  --pink-800: #A700C1;
  --pink-900: #8500B6;

  /* Teal Green (Secondary · Eden Care heritage, Fair-Aqua canvas at 50) */
  --teal-50:  #E0F6FA;
  --teal-100: #B1E9F1;
  --teal-200: #7EDBE8;
  --teal-300: #4BCCDE;
  --teal-400: #24C1D6;
  --teal-500: #00B6CF;
  --teal-600: #00A7BD;
  --teal-700: #0092A3;
  --teal-800: #007E8B;
  --teal-900: #005B60;

  /* Fair Aqua (desaturated blue-grey neutrals — cool support) */
  --fair-aqua-50:  #E7F0F4;
  --fair-aqua-100: #C9D9DE;
  --fair-aqua-200: #AABFC6;
  --fair-aqua-300: #89A6AF;
  --fair-aqua-400: #70929C;
  --fair-aqua-500: #577F8B;
  --fair-aqua-600: #4C707A;
  --fair-aqua-700: #3D5B64;
  --fair-aqua-800: #304850;
  --fair-aqua-900: #203339;

  /* Warm neutrals (the working surface palette — cream, not clinical white) */
  --neutral-50:  #FAF9F6;
  --neutral-100: #F2F0EB;
  --neutral-200: #E5E2DA;
  --neutral-300: #D6D2C7;
  --neutral-400: #A8A294;
  --neutral-500: #7C766A;
  --neutral-600: #5C574D;
  --neutral-700: #3D3933;
  --neutral-800: #262320;
  --neutral-900: #161513;

  /* Accent (Blue · tags, progress, info badges) */
  --accent-50:  #E2F2FF;
  --accent-100: #BBDDFF;
  --accent-200: #8DC8FF;
  --accent-300: #5AB2FF;
  --accent-400: #30A1FF;
  --accent-500: #0290FF;
  --accent-600: #1E81FF;
  --accent-700: #276EF1;
  --accent-800: #2B58DE;
  --accent-900: #2F38BE;

  /* Warning (Amber) */
  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-300: #FCD34D;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --warning-800: #92400E;
  --warning-900: #78350F;

  /* Destructive (Red) */
  --destructive-50:  #FDEAEE;
  --destructive-100: #FBCAD2;
  --destructive-200: #EA959B;
  --destructive-300: #DE6C74;
  --destructive-400: #E84853;
  --destructive-500: #ED323B;
  --destructive-600: #DE2839;
  --destructive-700: #CC1D33;
  --destructive-800: #BF152C;
  --destructive-900: #800020;

  /* ─────────────────────────────────────────────────────────────────────
     3 · SEMANTIC TOKENS  (what designs reference)
     ───────────────────────────────────────────────────────────────────── */

  /* Surfaces — warm cream canvas */
  --bg-page:     #FAF9F6;   /* app background       */
  --bg-surface:  #FFFFFF;   /* cards, panels        */
  --bg-sunken:   #F2F0EB;   /* wells, table headers */
  --bg-inverse:  #161513;   /* inverse / dark band  */

  /* Content (text) */
  --content-strong:   #161513;  /* headings, primary text  */
  --content-base:     #3D3933;  /* body copy               */
  --content-muted:    #7C766A;  /* secondary, captions     */
  --content-faint:    #A8A294;  /* placeholders, disabled  */
  --content-onInverse:#FFFFFF;
  --content-accent:   #00B050;  /* links/accent text       */

  /* Borders */
  --border-subtle: #EEEBE3;
  --border-base:   #E5E2DA;
  --border-strong: #D6D2C7;
  --border-focus:  #00B050;

  /* Primary action — Ginja Green (rest → hover → press) */
  --action-primary:        #00B050;
  --action-primary-hover:  #009E48;   /* green-600 */
  --action-primary-press:  #00893E;   /* green-700 */
  --action-onPrimary:      #FFFFFF;

  /* Accent action — Ginja Orange */
  --action-accent:         #F45A18;
  --action-accent-hover:   #DC5116;   /* orange-600 */
  --action-accent-press:   #BE4613;   /* orange-700 */
  --action-onAccent:       #FFFFFF;

  /* Destructive action — Red */
  --action-destructive:        #CC1D33;
  --action-destructive-hover:  #BF152C;
  --action-destructive-press:  #800020;
  --action-onDestructive:      #FFFFFF;

  /* Functional status (separate from brand) */
  --status-success:    #00893E;  --status-success-bg: #E0F6EA;
  --status-warning:    #B45309;  --status-warning-bg: #FFFBEB;
  --status-danger:     #CC1D33;  --status-danger-bg:  #FDEAEE;
  --status-info:       #276EF1;  --status-info-bg:    #E2F2FF;

  /* ─────────────────────────────────────────────────────────────────────
     4 · EC LAYER  (shadcn-style semantic tokens — "Eden Care" prefix kept
     for backward compat across the component library; remapped to v2 brand)
     ───────────────────────────────────────────────────────────────────── */
  --ec-background:          #FAF9F6;
  --ec-foreground:          #161513;
  --ec-card:                #FFFFFF;
  --ec-card-foreground:     #161513;
  --ec-popover:             #FFFFFF;
  --ec-popover-foreground:  #161513;
  --ec-muted:               #F2F0EB;
  --ec-muted-foreground:    #7C766A;
  --ec-border:              #E5E2DA;
  --ec-input:               #E5E2DA;

  --ec-primary:             #00B050;
  --ec-primary-hover:       #009E48;
  --ec-primary-press:       #00893E;
  --ec-primary-foreground:  #FFFFFF;

  --ec-accent:              #F45A18;
  --ec-accent-hover:        #DC5116;
  --ec-accent-press:        #BE4613;
  --ec-accent-foreground:   #FFFFFF;

  --ec-secondary:           #E0F6FA;
  --ec-secondary-foreground:#161513;

  --ec-destructive:             #CC1D33;
  --ec-destructive-hover:       #BF152C;
  --ec-destructive-press:       #800020;
  --ec-destructive-foreground:  #FFFFFF;

  --ec-link:                #00893E;   /* deeper green for text contrast */
  --ec-ring:                #00B050;

  /* Status-badge palette — light bg / strong fg pairs, one per workflow role */
  --ec-status-success-bg:  #D1F4DE; --ec-status-success-fg:  #1F7344;  /* mint  — Completed / Approved / Active */
  --ec-status-warning-bg:  #FFE9D6; --ec-status-warning-fg:  #A65A11;  /* amber — Pending (consultation)        */
  --ec-status-info-bg:     #DBEAFE; --ec-status-info-fg:     #1E40AF;  /* blue  — Pre-auth pending / partial    */
  --ec-status-progress-bg: #FBDDE8; --ec-status-progress-fg: #B83A78;  /* pink  — In progress / In consultation */
  --ec-status-neutral-bg:  #F3F4F6; --ec-status-neutral-fg:  #4F5152;  /* grey  — Done / Consultation done      */
  --ec-status-open-bg:     #E0F6FA; --ec-status-open-fg:     #005B60;  /* aqua  — Open visit                    */

  /* ─────────────────────────────────────────────────────────────────────
     5 · TYPOGRAPHY
     ───────────────────────────────────────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;   /* heroes, KPI, quotes */
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Type scale — 12 named styles (sizes in px) */
  --text-display-l:  52px;  /* hero / page title (serif)         */
  --text-display-m:  40px;
  --text-display-s:  32px;
  --text-heading-xl: 28px;
  --text-heading-l:  24px;
  --text-heading-m:  20px;
  --text-heading-s:  18px;
  --text-body-l:     16px;
  --text-body-m:     14px;  /* default UI body                   */
  --text-body-s:     13px;
  --text-label:      11px;  /* uppercase eyebrow / micro label   */
  --text-mono:       13px;

  --measure-prose: 680px;   /* max line length for reading-heavy copy */

  /* ─────────────────────────────────────────────────────────────────────
     6 · SPACING · RADIUS · ELEVATION · MOTION
     ───────────────────────────────────────────────────────────────────── */
  --space-0: 0;     --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; --space-16: 64px; --space-20: 80px;
  --space-24: 96px;

  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;    /* default control radius (buttons, inputs) */
  --radius-lg:   10px;   /* cards, panels                            */
  --radius-xl:   14px;   /* modals, large surfaces                   */
  --radius-full: 999px;  /* pills, avatars, dots                     */

  /* Elevation — warm-tinted shadows (rgba of the ink #211E18) */
  --elev-1: 0 1px 2px rgba(33,30,24,0.06), 0 1px 1px rgba(33,30,24,0.04);
  --elev-2: 0 2px 6px rgba(33,30,24,0.08), 0 1px 2px rgba(33,30,24,0.05);
  --elev-3: 0 6px 16px rgba(33,30,24,0.10), 0 2px 4px rgba(33,30,24,0.06);
  --elev-4: 0 16px 40px rgba(33,30,24,0.14), 0 4px 8px rgba(33,30,24,0.08);
  --elev-modal: 0 24px 64px rgba(0,0,0,0.20);

  /* Motion */
  --motion-instant: 0ms;
  --motion-fast:    120ms;
  --motion-base:    200ms;
  --motion-slow:    320ms;
  --motion-slower:  480ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasis:   cubic-bezier(0.2, 0, 0, 1.4);

  /* Breakpoints (reference in @media only) */
  --bp-xs: 400px; --bp-sm: 640px; --bp-md: 768px;
  --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px;

  /* Layout */
  --grid-max-w: 1200px;
  --grid-gutter: 24px;
}

/* ════════════════════════════════════════════════════════════════════════
   BASELINE + SEMANTIC TEXT CLASSES
   Apply .ginja-root on a wrapping element to opt into the brand baseline.
   ════════════════════════════════════════════════════════════════════════ */
.ginja-root {
  font-family: var(--font-body);
  color: var(--content-base);
  background: var(--bg-page);
  font-size: var(--text-body-m);
  line-height: 1.55;
  letter-spacing: -0.005em;
  /* Tabular, lining numerals + slashed zero — money & data must align */
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — Instrument Serif */
.ginja-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--content-strong);
}
.ginja-display-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Mono — JetBrains Mono */
.ginja-mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* Money / KPI display — serif + tabular */
.gj-money, .ginja-kpi-value {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Named type-scale utilities ------------------------------------------------ */
.text-display-l  { font-family: var(--font-display); font-size: var(--text-display-l);  font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; color: var(--content-strong); }
.text-display-m  { font-family: var(--font-display); font-size: var(--text-display-m);  font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; color: var(--content-strong); }
.text-display-s  { font-family: var(--font-display); font-size: var(--text-display-s);  font-weight: 400; line-height: 1.10; letter-spacing: -0.015em; color: var(--content-strong); }
.text-heading-xl { font-family: var(--font-body); font-size: var(--text-heading-xl); font-weight: 600; line-height: 1.20; letter-spacing: -0.015em; color: var(--content-strong); }
.text-heading-l  { font-family: var(--font-body); font-size: var(--text-heading-l);  font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; color: var(--content-strong); }
.text-heading-m  { font-family: var(--font-body); font-size: var(--text-heading-m);  font-weight: 600; line-height: 1.30; letter-spacing: -0.01em;  color: var(--content-strong); }
.text-heading-s  { font-family: var(--font-body); font-size: var(--text-heading-s);  font-weight: 600; line-height: 1.40; color: var(--content-strong); }
.text-body-l     { font-family: var(--font-body); font-size: var(--text-body-l); font-weight: 400; line-height: 1.60; }
.text-body-m     { font-family: var(--font-body); font-size: var(--text-body-m); font-weight: 400; line-height: 1.55; }
.text-body-s     { font-family: var(--font-body); font-size: var(--text-body-s); font-weight: 400; line-height: 1.50; }
.text-label      { font-family: var(--font-body); font-size: var(--text-label); font-weight: 600; line-height: 1.40; letter-spacing: 0.08em; text-transform: uppercase; color: var(--content-muted); }
.text-mono       { font-family: var(--font-mono); font-size: var(--text-mono); font-variant-numeric: tabular-nums; }