/* ============================================================
   KONPRANN — design tokens
   Every value in the system starts here. Two layers:
     1. primitives  --k-*      raw values, never used directly
     2. semantics   --color-*, --text-*, --space-* … use these
   A theme swaps the semantic layer only.
   ============================================================ */

:root{

  /* ---- 1. PRIMITIVES --------------------------------------- */

  /* Blues — drawn from the clinical photography */
  --k-baltic-900:#04364A;
  --k-baltic-700:#05668D;
  --k-baltic-500:#2A87AB;
  --k-baltic-200:#C7DDE9;
  --k-baltic-100:#E7F0F5;

  --k-sky-200:#B9D8EE;   /* photo background, mid  */
  --k-sky-100:#DCEBF6;   /* photo background, pale */

  --k-teal-700:#028090;
  --k-teal-100:#E3F1F3;

  --k-verdigris-700:#00A896;
  --k-verdigris-100:#E1F5F1;

  --k-mint-500:#02C39A;
  --k-cream-300:#F0F3BD;

  --k-red-700:#A62B3C;
  --k-red-500:#D1495B;

  /* Spectrum — blue → magenta, used as a SEQUENCE */
  --k-blue-700:#2D00F7;
  --k-blue-100:#ECE6FF;
  --k-violet-700:#8900F2;
  --k-violet-100:#F3E7FE;
  --k-orchid-700:#D100D1;
  --k-orchid-100:#FBE4F9;
  --k-pink-800:#B0006E;
  --k-pink-500:#F20089;
  --k-pink-200:#FFB3E6;
  --k-pink-100:#FCE7F7;
  --k-violet-950:#180033;
  --k-violet-800:#3C2A5E;
  --k-violet-600:#6B5A8C;
  --k-lilac-300:#C9B4FF;
  --k-lilac-200:#E2D9F5;
  --k-lilac-050:#FCFAFF;

  /* Neutrals — cool, never pure grey */
  --k-ink-900:#0E2A35;
  --k-ink-700:#33555F;
  --k-ink-500:#4F6D77;
  --k-ink-400:#5F7F8B;
  --k-line-200:#CFE0E4;
  --k-paper:#FCFDF5;
  --k-white:#FFFFFF;

  /* ---- 2. SEMANTIC COLOUR ---------------------------------- */

  --color-bg:            var(--k-lilac-050);
  --color-surface:       var(--k-white);
  --color-surface-sunk:  var(--k-blue-100);

  --color-text:          var(--k-violet-950);
  --color-text-body:     var(--k-violet-800);
  --color-text-muted:    var(--k-violet-600);  /* passes 4.5:1 on --color-bg */
  --color-text-label:    var(--k-violet-600);
  --color-text-on-dark:  var(--k-lilac-300);
  --color-muted-on-dark: #9A87BE;              /* quietest text on a dark field */
  --color-border:        var(--k-lilac-200);

  --color-accent:        var(--k-blue-700);    /* primary: panels, links, step 1 */
  --color-accent-2:      var(--k-violet-700);  /* step 2 */
  --color-accent-3:      var(--k-orchid-700);  /* step 3 + chip icons — FILL, not text */
  --color-accent-text:   var(--k-violet-700);  /* the accent that is safe as small text */
  --color-decor:         var(--k-pink-500);    /* orbs and rings only */
  --color-highlight:     var(--k-blue-100);    /* questions / panel field */
  --color-highlight-alt: var(--k-pink-100);    /* callout field */
  --color-on-accent:     var(--k-pink-200);    /* text + chips ON an accent field */
  --color-danger:        var(--k-pink-800);    /* TEXT: Danje, 911 */
  --color-danger-fill:   var(--k-pink-500);    /* FILL behind white icons */

  --color-step-1:        var(--k-blue-700);
  --color-step-2:        var(--k-violet-700);
  --color-step-3:        var(--k-orchid-700);
  --color-step-1-tint:   var(--k-blue-100);
  --color-step-2-tint:   var(--k-violet-100);
  --color-step-3-tint:   var(--k-orchid-100);

  /* ---- 3. TYPE --------------------------------------------- */

  --font-display:"Archivo","Arial Black",system-ui,sans-serif;
  --font-text:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;

  --text-2xs:13px;   /* eyebrows, credits — uppercase only */
  --text-xs:15px;
  --text-sm:16px;
  --text-base:17px;  /* print body floor */
  --text-md:19px;    /* screen body */
  --text-lg:21px;
  --text-xl:25px;
  --text-2xl:34px;
  --text-3xl:40px;
  --text-4xl:62px;

  --leading-tight:1;
  --leading-snug:1.12;
  --leading-normal:1.4;
  --leading-loose:1.5;

  --weight-regular:400;
  --weight-medium:600;
  --weight-bold:700;
  --weight-heavy:800;
  --weight-black:900;

  --tracking-tight:-.03em;
  --tracking-normal:0;
  --tracking-wide:.16em;   /* eyebrows */
  --tracking-wider:.2em;   /* kickers  */

  /* ---- 4. SPACE (4px base) --------------------------------- */

  --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-14:56px;

  /* ---- 5. SHAPE, DEPTH, LAYOUT ----------------------------- */

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-pill:999px;

  --stroke-hair:1px;
  --stroke-rule:3px;
  --icon-stroke:1.7;

  --shadow-card:0 6px 26px rgba(14,42,53,.22);
  --shadow-float:0 8px 20px rgba(0,0,0,.22);

  --measure:740px;          /* reading column */
  --sheet-w:816px;          /* 8.5in @ 96dpi */
  --sheet-h:1056px;         /* 11in  @ 96dpi */
  --tap-min:44px;           /* never smaller */

  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:160ms;
}

/* ============================================================
   THEME: clinical — ARCHIVED.
   The original baltic→mint colourway, kept so earlier printed
   runs can be reproduced exactly. Apply with
   <html data-theme="clinical">. Primitives are untouched; only
   the semantic layer moves.
   ============================================================ */

[data-theme="clinical"]{
  --color-bg:            var(--k-paper);
  --color-surface-sunk:  var(--k-baltic-100);

  --color-text:          var(--k-ink-900);
  --color-text-body:     var(--k-ink-700);
  --color-text-muted:    var(--k-ink-500);
  --color-text-label:    var(--k-ink-400);
  --color-text-on-dark:  #A9D8E8;
  --color-muted-on-dark: #8FA6AE;
  --color-border:        var(--k-line-200);

  --color-accent:        var(--k-baltic-700);
  --color-accent-2:      var(--k-teal-700);
  --color-accent-3:      var(--k-verdigris-700);
  --color-accent-text:   var(--k-teal-700);
  --color-decor:         var(--k-mint-500);
  --color-highlight:     var(--k-cream-300);
  --color-highlight-alt: var(--k-cream-300);
  --color-on-accent:     var(--k-cream-300);
  --color-danger:        var(--k-red-700);
  --color-danger-fill:   var(--k-red-500);

  --color-step-1:        var(--k-baltic-700);
  --color-step-2:        var(--k-teal-700);
  --color-step-3:        var(--k-verdigris-700);
  --color-step-1-tint:   var(--k-baltic-100);
  --color-step-2-tint:   var(--k-teal-100);
  --color-step-3-tint:   var(--k-verdigris-100);
}