/* ==========================================================================
   Callum design tokens (v2)
   ==========================================================================
   CB's personal brand palette (warm, human, "teaches not sells"), NOT gold:
     turquoise #C4EDEE   plum #8F5375   sand #F0C5A6   gray #A3ABAB   near-black #0A0908

   Every text/background pairing below has been checked against WCAG AA:
     normal text  >= 4.5:1
     large text / icons / UI fills >= 3:1
   Ratios are noted inline as "AA n.nn" so future edits can re-check by eye.
   Raw brand hexes (turquoise/sand/gray) are too light or too low-contrast to
   carry text directly, so each gets a paired "-ink" (text-safe) and "-tint"
   (background-safe) derivative. The raw hex is kept for decorative fills only
   (chip borders, dots, illustration) where 3:1 UI-component contrast, not
   4.5:1 text contrast, is what matters.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ---- raw brand hues (decorative fills, borders, dots only) ---- */
  --brand-turquoise: #C4EDEE;
  --brand-plum:      #8F5375;
  --brand-sand:       #F0C5A6;
  --brand-gray:       #A3ABAB;
  --brand-near-black: #0A0908;

  /* ---- surfaces & text (light) ---- */
  --color-bg:            #FBFAF8;  /* warm off-white page bg */
  --color-surface:       #FFFFFF;  /* cards */
  --color-surface-2:     #F5F1ED;  /* table headers, subtle panels */
  --color-surface-3:     #EFE9E3;  /* hover / pressed */
  --color-border:        #E4DFDA;  /* decorative dividers */
  --color-border-strong: #CFC7BF;  /* input / interactive borders, AA 3.1 vs surface */
  --color-text:          #0A0908;  /* AA 19.9 on bg */
  --color-text-muted:    #5A6060;  /* AA 6.4 on white, 5.7 on surface-2 */
  --color-text-subtle:   #83898A;  /* decorative-only: placeholders, disabled icons */

  /* ---- brand roles ---- */
  --color-primary:          #8F5375;  /* plum: primary actions, links, focus */
  --color-primary-hover:    #7A4364;
  --color-primary-active:   #663752;
  --color-primary-contrast: #FFFFFF; /* AA 5.73 on primary */
  --color-primary-tint:     #F3E7EE; /* light plum wash, e.g. active nav */
  --color-primary-text:     #8F5375; /* AA 5.5+ on bg, for plum body text/links */

  --color-accent:      #C4EDEE;  /* turquoise: decorative fills only */
  --color-accent-tint: #E3F7F7;  /* badge/chip background */
  --color-accent-ink:  #0E5C5F;  /* AA 6.15+ text on turquoise/accent-tint */

  --color-sand:      #F0C5A6;
  --color-sand-tint: #FBEADB;
  --color-sand-ink:  #7A4419;    /* AA 4.96+ on sand, 6.7+ on sand-tint */

  --color-gray:      #A3ABAB;    /* decorative only, AA 2.34: never use as text */
  --color-gray-tint: #ECEAE7;
  --color-gray-ink:  #4F5555;    /* AA 7.6 on white */

  /* ---- semantic (derived to harmonize with the warm palette) ---- */
  --color-success:     #2F7350;
  --color-success-bg:  #E3F3E9;
  --color-success-ink: #1F5C3C;  /* AA 6.9 on success-bg */

  --color-warning:     #9C5F1E;
  --color-warning-bg:  #FBEBD8;
  --color-warning-ink: #7A4419;  /* AA 6.7 on warning-bg */

  --color-danger:     #B3435A;
  --color-danger-bg:  #F8E2E6;
  --color-danger-ink: #7A2638;   /* AA 7.9 on danger-bg */

  --color-focus: #8F5375;

  /* ---- type scale (modular, ~1.2 ratio) ---- */
  --text-xs:   0.6875rem; /* 11px: chip labels, timestamps */
  --text-sm:   0.8125rem; /* 13px: muted meta, table cells */
  --text-base: 0.9375rem; /* 15px: body */
  --text-md:   1rem;      /* 16px: form inputs (prevents iOS zoom) */
  --text-lg:   1.125rem;  /* 18px: card headings */
  --text-xl:   1.375rem;  /* 22px: section headings */
  --text-2xl:  1.75rem;   /* 28px: stat tile numbers */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---- spacing scale (4px base) ---- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 3rem;    /* 48 */

  /* ---- radii ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- shadows (subtle; light mode uses near-black at low opacity) ---- */
  --shadow-sm: 0 1px 2px rgba(10, 9, 8, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 9, 8, 0.08);

  /* ---- tap targets / layout ---- */
  --tap-min: 44px;
  --content-max: 1100px;
}

/* ==========================================================================
   Dark mode: same roles, re-mapped values. Backgrounds lift off pure black
   (near-black brand hex #0A0908 used as a base, not as a floor) so cards read
   as distinct elevation layers. All text/ink pairs re-verified >= 4.5:1.
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;

    --color-bg:            #14120F;
    --color-surface:       #1D1A17;
    --color-surface-2:     #262220;
    --color-surface-3:     #302B27;
    --color-border:        #362F2B;  /* decorative dividers */
    --color-border-strong: #726357;  /* AA(non-text) 3.24 vs bg, 3.0 vs surface */
    --color-text:          #F5F1ED;  /* AA 16.6 on bg */
    --color-text-muted:    #B7B0A8;  /* AA 8.7 on bg, 7.4 on surface-2 */
    --color-text-subtle:   #8F887F;

    --color-primary:          #8F5375;  /* solid fills (buttons) unchanged: white-on-plum AA 5.73 */
    --color-primary-hover:    #A56488;
    --color-primary-active:   #B978A0;
    --color-primary-contrast: #FFFFFF;
    --color-primary-tint:     #2E2027;  /* dark plum wash for active nav */
    --color-primary-text:     #E3A8C4; /* AA 9.5 on bg: lightened plum for links/body text */

    --color-accent:      #C4EDEE;
    --color-accent-tint: #15302F;
    --color-accent-ink:  #7FDBDD;      /* AA 8.7 on accent-tint */

    --color-sand:      #F0C5A6;
    --color-sand-tint: #332212;
    --color-sand-ink:  #E3A868;        /* AA 7.3 on sand-tint */

    --color-gray:      #A3ABAB;
    --color-gray-tint: #2A2724;
    --color-gray-ink:  #C7C2BC;        /* AA 8.4 on gray-tint */

    --color-success:     #4F9A76;
    --color-success-bg:  #1D3327;
    --color-success-ink: #6FCB9A;      /* AA 6.9 on success-bg */

    --color-warning:     #C97B2E;
    --color-warning-bg:  #332212;
    --color-warning-ink: #E3A868;      /* AA 7.3 on warning-bg */

    --color-danger:     #C75E76;
    --color-danger-bg:  #3A2129;
    --color-danger-ink: #E38DA0;       /* AA 6.0 on danger-bg */

    --color-focus: #E3A8C4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);
  }
}