/* ==========================================================================
   Eukinia — design tokens
   Shared by the landing page, the therapist dashboard and the patient app.
   Every value below has been machine-validated (see docs/brand/palette.md):
     · categorical chart palette  → 6/6 checks pass, light + dark
     · sequential ramps           → monotone L, ΔL ≥ 0.06, light end ≥ 2:1
     · every text token           → WCAG AA or better on its own surface
   Do not hand-tune a colour here without re-running the validators.
   ========================================================================== */

:root {
  /* ---- Ramp: Aegean (Αιγαίο) — primary. Trust, water, movement. ---------- */
  --aegean-50:  #EEF8FA;
  --aegean-100: #D4EEF3;
  --aegean-200: #A9DCE6;
  --aegean-300: #58C6D9;
  --aegean-400: #159FB8;
  --aegean-500: #0086A3;
  --aegean-600: #0E6E7D;
  --aegean-700: #0A5561;
  --aegean-800: #093F49;
  --aegean-900: #0B2329;
  --aegean-950: #04171B;

  /* ---- Ramp: Kerameikós (Κεραμεικός) — accent. Attic terracotta, warmth,
          the human/patient side of the product. ------------------------- */
  --kerameikos-50:  #FDF3EE;
  --kerameikos-100: #FAE3D8;
  --kerameikos-200: #F4C6B0;
  --kerameikos-300: #F0895F;
  --kerameikos-400: #DE7248;
  --kerameikos-500: #CB4E28;
  --kerameikos-600: #B84A28;
  --kerameikos-700: #A34222;
  --kerameikos-800: #82351C;
  --kerameikos-900: #4E2011;

  /* ---- Ramp: Mármaro (Μάρμαρο) — warm neutrals. Pentelic marble, not the
          cold grey of hospital software. -------------------------------- */
  --marmaro-0:   #FFFFFF;
  --marmaro-50:  #FAF7F2;
  --marmaro-100: #F4EFE7;
  --marmaro-150: #F0EAE0;
  --marmaro-200: #E5DCCE;
  --marmaro-300: #DCD3C6;
  --marmaro-400: #C8BCAB;
  --marmaro-500: #8C8375;
  --marmaro-600: #6E6558;

  /* ---- Status. Reserved: never reused as a chart series. ----------------- */
  --status-good-600:     #1F6B45;
  --status-good-300:     #4FB782;
  --status-warning-600:  #8A6206;
  --status-warning-300:  #D8A72A;
  --status-critical-600: #A3231C;
  --status-critical-300: #F0736A;

  /* ---- Categorical chart palette — FIXED ORDER, never cycled. ------------
          A 7th series folds into "Other" or becomes small multiples. */
  --cat-1: #0086A3; /* aegean    */
  --cat-2: #D2542C; /* terracotta */
  --cat-3: #3A63C4; /* deep sea   */
  --cat-4: #B0851B; /* ochre      */
  --cat-5: #9A3F96; /* porphyra   */
  --cat-6: #5C8F2A; /* olive      */

  /* ---- Sequential: adherence / volume (single hue, light → dark) --------- */
  --seq-adherence-1: #5CBFD4;
  --seq-adherence-2: #1C9EB8;
  --seq-adherence-3: #00819D;
  --seq-adherence-4: #0C6877;
  --seq-adherence-5: #08505C;

  /* ---- Sequential: pain intensity 0–10 (single hue — deliberately NOT a
          red/green traffic light; pain is magnitude, not good/bad). ------ */
  --seq-pain-1: #EB9A74;
  --seq-pain-2: #DE7248;
  --seq-pain-3: #CB4E28;
  --seq-pain-4: #A94322;
  --seq-pain-5: #7E3319;

  /* ---- Semantic — LIGHT (default) --------------------------------------- */
  --bg:              var(--marmaro-50);
  --bg-alt:          var(--marmaro-100);
  --surface:         var(--marmaro-0);
  --surface-sunken:  var(--marmaro-150);
  --surface-invert:  var(--aegean-900);

  --ink:             #12262B;
  --ink-muted:       #485C62;
  --ink-subtle:      #586A6F;
  --ink-invert:      #DFE9E9;
  --ink-on-brand:    #FFFFFF;

  --brand:           var(--aegean-600);
  --brand-hover:     var(--aegean-700);
  --brand-soft:      var(--aegean-50);
  --brand-ink:       #0B5A67;
  --accent:          var(--kerameikos-600);
  --accent-hover:    var(--kerameikos-800);
  --accent-soft:     var(--kerameikos-50);
  --accent-ink:      var(--kerameikos-700);

  --border:          var(--marmaro-300);
  --border-strong:   var(--marmaro-400);
  --border-input:    var(--marmaro-500);   /* 3.5:1 — meets non-text contrast */
  --focus:           var(--aegean-600);

  --good:            var(--status-good-600);
  --warning:         var(--status-warning-600);
  --critical:        var(--status-critical-600);

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans", "Noto Sans Greek", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid scale — 320px → 1280px viewport */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.09rem);
  --step-1:  clamp(1.19rem, 1.11rem + 0.38vw, 1.38rem);
  --step-2:  clamp(1.41rem, 1.28rem + 0.66vw, 1.73rem);
  --step-3:  clamp(1.67rem, 1.45rem + 1.09vw, 2.19rem);
  --step-4:  clamp(1.98rem, 1.63rem + 1.75vw, 2.76rem);
  --step-5:  clamp(2.35rem, 1.79rem + 2.79vw, 3.48rem);
  --step-6:  clamp(2.79rem, 1.9rem + 4.44vw, 4.39rem);

  /* ---- Space, radius, shadow, motion ------------------------------------ */
  --space-2xs: 0.25rem;  --space-xs: 0.5rem;   --space-sm: 0.75rem;
  --space-md:  1rem;     --space-lg: 1.5rem;   --space-xl: 2rem;
  --space-2xl: 3rem;     --space-3xl: 4.5rem;  --space-4xl: 7rem;

  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 28px; --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(7 39 46 / 0.05), 0 1px 3px rgb(7 39 46 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(7 39 46 / 0.07), 0 12px 24px -8px rgb(7 39 46 / 0.10);
  --shadow-lg: 0 8px 16px -4px rgb(7 39 46 / 0.08), 0 28px 56px -16px rgb(7 39 46 / 0.16);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* Strength of translucent brand tints (the covered-sessions band, soft
     fills). A 7% wash that reads on warm paper vanishes on near-black. */
  --wash: .07;
  /* Unselected pain swatches: dimmer on paper, less so against near-black. */
  --swatch-dim: .5;

  --measure: 62ch;
  --container: 1180px;
  --container-narrow: 780px;

  /* Paper grain. Marble and pressed paper are not flat, and neither is this
     page — a fractal-noise tile at very low alpha gives the warm neutrals a
     material quality that a flat fill cannot. One rasterised 140px tile. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Dark — a selected set of steps, not an inverted light theme.
   Chart colours are re-stepped (mid-lightness against a dark surface),
   validated separately against #0B2329.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             var(--aegean-900);
    --bg-alt:         #0F2E36;
    --surface:        #143A44;
    --surface-sunken: #0F2E36;
    --surface-invert: var(--marmaro-50);

    --ink:            #DFE9E9;
    --ink-muted:      #AEC2C4;
    --ink-subtle:     #9BB0B3;
    --ink-invert:     #12262B;
    --ink-on-brand:   #04171B;

    --brand:          var(--aegean-300);
    --brand-hover:    var(--aegean-200);
    --brand-soft:     #0D4553;
    --wash:           .10;
    --swatch-dim:     .68;
    --brand-ink:      var(--aegean-300);
    --accent:         var(--kerameikos-300);
    --accent-hover:   var(--kerameikos-200);
    --accent-soft:    #35201A;
    --accent-ink:     var(--kerameikos-300);

    --border:         #2F5964;
    --border-strong:  #42737F;
    --border-input:   #5E7F86;
    --focus:          var(--aegean-300);

    --good:           var(--status-good-300);
    --warning:        var(--status-warning-300);
    --critical:       var(--status-critical-300);

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.06'/%3E%3C/svg%3E");
    --cat-1: #159FB8; --cat-2: #E06A42; --cat-3: #5B82DF;
    --cat-4: #BA8A1C; --cat-5: #B85CB2; --cat-6: #6FA733;

    --seq-adherence-1: #0A4E5B; --seq-adherence-2: #0C6877;
    --seq-adherence-3: #00819D; --seq-adherence-4: #1C9EB8;
    --seq-adherence-5: #5CBFD4;

    --seq-pain-1: #7E3319; --seq-pain-2: #A94322; --seq-pain-3: #CB4E28;
    --seq-pain-4: #DE7248; --seq-pain-5: #EB9A74;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.34), 0 12px 24px -8px rgb(0 0 0 / 0.44);
    --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.36), 0 28px 56px -16px rgb(0 0 0 / 0.52);
  }
}

/* Explicit toggle wins over the OS preference, in both directions. */
:root[data-theme="dark"] {
  --bg:             var(--aegean-900);
  --bg-alt:         #0F2E36;
  --surface:        #143A44;
  --surface-sunken: #0F2E36;
  --surface-invert: var(--marmaro-50);

  --ink:            #DFE9E9;
  --ink-muted:      #AEC2C4;
  --ink-subtle:     #9BB0B3;
  --ink-invert:     #12262B;
  --ink-on-brand:   #04171B;

  --brand:          var(--aegean-300);
  --brand-hover:    var(--aegean-200);
  --brand-soft:     #0D4553;
    --wash:           .10;
    --swatch-dim:     .68;
  --brand-ink:      var(--aegean-300);
  --accent:         var(--kerameikos-300);
  --accent-hover:   var(--kerameikos-200);
  --accent-soft:    #35201A;
  --accent-ink:     var(--kerameikos-300);

  --border:         #2F5964;
  --border-strong:  #42737F;
  --border-input:   #5E7F86;
  --focus:          var(--aegean-300);

  --good:           var(--status-good-300);
  --warning:        var(--status-warning-300);
  --critical:       var(--status-critical-300);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.06'/%3E%3C/svg%3E");
  --cat-1: #159FB8; --cat-2: #E06A42; --cat-3: #5B82DF;
  --cat-4: #BA8A1C; --cat-5: #B85CB2; --cat-6: #6FA733;

  --seq-adherence-1: #0A4E5B; --seq-adherence-2: #0C6877;
  --seq-adherence-3: #00819D; --seq-adherence-4: #1C9EB8;
  --seq-adherence-5: #5CBFD4;

  --seq-pain-1: #7E3319; --seq-pain-2: #A94322; --seq-pain-3: #CB4E28;
  --seq-pain-4: #DE7248; --seq-pain-5: #EB9A74;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.34), 0 12px 24px -8px rgb(0 0 0 / 0.44);
  --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.36), 0 28px 56px -16px rgb(0 0 0 / 0.52);
}