/**
 * 01-asw.css
 * ASW semantic layer — builds on Open Props
 *
 * Open Props (imported in main.css) provides the base scales:
 *   --color-1…16  (oklch, palette-hue-tinted — the primary color scale)
 *   --gray-0…15, --green-0…12, --blue-0…12, --red-0…12, --yellow-0…12
 *   --size-1…15, --font-size-0…8, --font-weight-1…9
 *   --font-lineheight-0…5, --radius-1…6, --shadow-1…6
 *   --ease-1…5, --ease-spring-1…5, --ease-bounce-1…5
 *   --gradient-1…30, --animation-*, @keyframes
 *
 * This file defines only what Open Props doesn't:
 *   1. Surface / text / accent — semantic aliases (override to theme)
 *   2. Font stack aliases — prose, heading, ui (map to OP font stacks)
 *   3. Agent-native tokens — task, callout, session, wikilink, redacted
 *   4. A handful of precise values without direct OP equivalents
 *
 * To theme ASW:
 *   Set --palette-hue in your own CSS to shift all color-N surfaces/text.
 *   Override semantic aliases at :root for finer control.
 *
 * Lineage: absorbed patterns from Pico CSS, Open Props, Charts.css.
 */

/* ── Project-specific custom media (complement Open Props) ──────────
   Open Props doesn't define every breakpoint the layout needs.
   These are resolved by PostCSS at build time alongside OP tokens.
   ─────────────────────────────────────────────────────────────────── */
@custom-media --docs-toc-hidden  (width < 1100px);   /* docs layout: 3→2 col */
@custom-media --nav-compact      (width < 991px);    /* nav: allow link wrap */

/* ══════════════════════════════════════════════════════════════════
   DARK THEME (default)
   Using Open Props oklch --color-N 16-step palette.
   Set --palette-hue to tint all surfaces and text. Example:
     Trentuna:       --palette-hue: 45   (warm amber tint)
     vigilio-garden: --palette-hue: 150  (subtle green tint)
   ══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Palette controls ───────────────────────────────────────────────
     --color-1 (lightest) through --color-16 (darkest) follow this hue.
     Change --palette-hue to retheme all surfaces and text in one place.
     ─────────────────────────────────────────────────────────────────── */
  --palette-hue:    250;    /* blue-violet default */
  --palette-chroma: 0.15;

  /* ── Surfaces — dark end of the 16-step scale ─────────────────── */

  --surface:        var(--color-16);   /* ~10% lightness */
  --surface-1:      var(--color-15);   /* ~16% */
  --surface-2:      var(--color-14);   /* ~20% */
  --surface-card:   var(--surface-1);
  --surface-hover:  var(--surface-2);

  /* ── Text — light end of the scale ────────────────────────────── */

  --text:           var(--color-3);    /* 93% lightness */
  --text-2:         var(--color-5);    /* 80% */
  --text-3:         var(--color-7);    /* 66% */
  --text-dim:       var(--color-9);    /* 53% */

  /* ── Accent — peak chroma step, palette-driven ─────────────────── */

  --accent:              var(--color-8);    /* 58%, peak chroma */
  --accent-hover:        var(--color-7);    /* 66% */
  --on-accent:           var(--color-16);
  --accent-focus:            oklch(58% 0.15 var(--palette-hue) / 0.35);
  --accent-subtle:           oklch(58% 0.15 var(--palette-hue) / 0.10);
  --accent-underline:        oklch(58% 0.15 var(--palette-hue) / 0.45);
  --accent-hover-underline:  oklch(66% 0.15 var(--palette-hue) / 0.55);

  /* ── Links — fixed blue hue, not palette-driven ─────────────────
     Blue is the web convention. Accent is palette-tinted UI chrome. */

  --link:                  oklch(65% 0.15 250);
  --link-hover:            oklch(72% 0.15 250);
  --link-underline:        oklch(65% 0.08 250);
  --link-hover-underline:  oklch(72% 0.10 250);
  --link-focus:            oklch(65% 0.06 250);

  /* Secondary accents — fixed hues, not palette-driven */
  --accent-blue:    oklch(65% 0.15 250);   /* matches --link */
  --accent-red:     oklch(65% 0.18 25);    /* matches --error */
  --accent-orange:  oklch(75% 0.15 80);    /* matches --warn */

  /* ── Border ────────────────────────────────────────────────────── */

  --border:         var(--color-14);   /* ~20% lightness */
  --border-subtle:  var(--color-15);   /* ~16% lightness */
  --border-width:   1px;
  --outline-width:  2px;

  /* ── Font stacks ───────────────────────────────────────────────── */
  /* Open Props named stacks — no web font loading required.         */
  /* --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova  */
  /* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata...  */

  --font-prose:    var(--font-neo-grotesque);
  --font-heading:  var(--font-neo-grotesque);
  --font-ui:       var(--font-neo-grotesque);
  /* --font-mono: var(--font-monospace-code) — provided directly by Open Props */

  /* ── Typography scale ─────────────────────────────────────────── */
  /* Open Props provides: --font-size-0 (.75rem) through --font-size-8 (3.5rem) */
  /* We define only the one gap: 0.875rem has no OP equivalent        */

  --text-xs:    var(--font-size-0);   /* 0.75rem  — badges, fine print */
  --text-sm:    0.875rem;             /* 0.875rem — metadata, captions (no OP match) */
  --text-base:  var(--font-size-1);   /* 1rem     — body */
  --text-2xl:   var(--font-size-4);   /* 1.5rem   — subheadings */
  --text-3xl:   var(--font-size-5);   /* 2rem     — section headings */

  /* ── Heading scale ─────────────────────────────────────────────── */

  --h1-size:   1.875rem;
  --h2-size:   1.5rem;
  --h3-size:   1.25rem;
  --h4-size:   1.0625rem;
  --h5-size:   0.9375rem;
  --h6-size:   0.8125rem;

  --h1-weight: var(--font-weight-4);   /* 400 */
  --h2-weight: var(--font-weight-4);
  --h3-weight: var(--font-weight-4);
  --h4-weight: var(--font-weight-5);   /* 500 */
  --h5-weight: var(--font-weight-6);   /* 600 */
  --h6-weight: var(--font-weight-6);

  --h1-color: var(--color-2);
  --h2-color: var(--color-3);
  --h3-color: var(--color-3);
  --h4-color: var(--color-5);
  --h5-color: var(--color-5);
  --h6-color: var(--color-7);

  /* ── Spacing aliases ─────────────────────────────────────────────
     Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem),
     --size-5 (1.5rem), --size-7 (2rem), --size-9 (4rem)
     We alias these with semantic names AND define --space-3 (0.75rem gap)
     ──────────────────────────────────────────────────────────────── */

  --space-1:  var(--size-1);    /* 0.25rem */
  --space-2:  var(--size-2);    /* 0.50rem */
  --space-3:  0.75rem;          /* 0.75rem — no OP equivalent */
  --space-4:  var(--size-3);    /* 1.00rem */
  --space-5:  var(--size-5);    /* 1.50rem */
  --space-6:  var(--size-7);    /* 2.00rem */
  --space-8:  var(--size-9);    /* 4.00rem */

  /* ── Width tokens ───────────────────────────────────────────────── */

  --width-prose:   var(--size-content-3);  /* 60ch — Open Props reading width */
  --width-content: var(--size-lg);         /* 1024px — Open Props content width */
  --width-full:    var(--width-xl);        /* alias → --width-xl */

  /* ── Layout breakpoints ──────────────────────────────────────────── */
  /* These don't map exactly to Open Props --size-* — defined explicitly */

  --width-sm:   510px;
  --width-md:   700px;
  --width-lg:   950px;
  --width-xl:  1200px;
  --width-2xl: 1450px;

  /* ── Structural component dimensions ─────────────────────────────── */

  --sidebar-width:       220px;         /* docs sidebar column */
  --toc-width:           200px;         /* docs TOC column */
  --nav-height:           60px;         /* sticky nav offset for calc() */
  --docs-max-width:      1400px;        /* docs layout outer cap */
  --card-min-width:       280px;        /* card-grid minmax floor */
  --tooltip-max-width:   var(--size-px-14);  /* 320px — tooltip overflow cap */
  --scrollbar-size:      var(--border-size-3); /* 5px — thin webkit scrollbar thumb */

  /* ── Chart dimensions ────────────────────────────────────────────── */

  --chart-radial-size:   var(--size-px-11);   /* 120px — radial gauge cell */
  --chart-radial-inset:  18px;                /* donut-hole inset — no OP equivalent */

  /* ── Diff viewer tokens ──────────────────────────────────────────── */

  --diff-add-bg:      color-mix(in oklch, var(--ok) 10%, transparent);
  --diff-remove-bg:   color-mix(in oklch, var(--error) 10%, transparent);
  --diff-remove-text: oklch(88% 0.06 25);
  --diff-hunk-bg:     color-mix(in oklch, var(--info) 7%, transparent);

  /* ── AI-disclosure border tokens ────────────────────────────────── */

  --ai-generated-border: color-mix(in oklch, var(--ok) 25%, transparent);
  --ai-assisted-border:  color-mix(in oklch, var(--info) 20%, transparent);
  --ai-mixed-border:     color-mix(in oklch, var(--warn) 30%, transparent);

  /* ── Rhythm ─────────────────────────────────────────────────────── */

  --type-space:      var(--space-4);    /* paragraph / element spacing */
  --type-space-top:  var(--space-5);    /* heading top margin after content */
  --leading:         1.6;
  --leading-tight:   var(--font-lineheight-1);   /* 1.25 */

  /* ── Radius ─────────────────────────────────────────────────────── */
  /* Open Props: --radius-1 (2px), --radius-2 (5px), --radius-3 (1rem) */

  --radius-sm:  var(--radius-1);   /* 2px */
  --radius-md:  4px;               /* between OP radius-1 and radius-2 */

  /* ── Easing ─────────────────────────────────────────────────────── */
  /* Open Props provides rich curves — we alias the most-used ones */

  --ease:           var(--duration-moderate-1) var(--ease-3);   /* 180ms — hover, focus, colour */
  --ease-fast:      var(--duration-quick-1) var(--ease-2);      /*  80ms — instant feedback */
  --spinner-duration: var(--duration-gentle-1);                 /* 320ms — spinner rotation cycle */

  /* ── Inline element tokens ─────────────────────────────────────── */

  --selection:    oklch(65% 0.08 250 / 0.30);
  --mark-bg:      oklch(45% 0.10 80 / 0.40);
  --mark-color:   var(--accent-orange);
  --kbd-bg:       var(--text);
  --kbd-color:    var(--surface);
  --code-color:   var(--text-2);
  --table-stripe: color-mix(in oklch, var(--color-15) 50%, transparent);

  /* ── Form tokens ─────────────────────────────────────────────────── */

  --input-bg:         var(--surface-1);
  --input-border:     var(--border);
  --input-active-bg:  var(--surface);
  --input-selected:   color-mix(in oklch, var(--accent) 20%, transparent);
  --input-px:         var(--space-4);
  --input-py:         var(--space-3);
  --disabled-opacity: 0.5;

  /* ── State colors — fixed hues, harmonized oklch ─────────────────── */

  --ok:           oklch(75% 0.15 145);   /* green */
  --warn:         oklch(75% 0.15 80);    /* amber */
  --error:        oklch(75% 0.15 25);    /* red */
  --info:         oklch(75% 0.15 250);   /* blue */
  --blocked:      var(--color-9);

  --error-active: oklch(65% 0.18 25);
  --error-focus:  oklch(65% 0.06 25);

  /* ── Component tokens ─────────────────────────────────────────────── */

  --track-bg:         var(--surface-2);   /* progress / meter background */
  --modal-overlay:    color-mix(in oklch, var(--color-16) 80%, transparent);
  --modal-backdrop:   blur(0.375rem);
  --accordion-active: var(--accent-hover);

  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");


  /* ══════════════════════════════════════════════════════════════════
     AGENT-NATIVE TOKENS
     These are ASW's actual contribution — concepts no other framework has.
     Propose additions to Open Props: data-task, data-callout, data-session.
     ══════════════════════════════════════════════════════════════════ */

  --task-done:    var(--ok);
  --task-blocked: var(--error);
  --task-wip:     var(--warn);
  --task-todo:    var(--color-9);

  --callout-info:  var(--info);
  --callout-warn:  var(--warn);
  --callout-error: var(--error);
  --callout-note:  var(--color-9);

  --session-bg:   var(--surface-1);
  --wikilink:     var(--link);
  --redacted:     var(--color-11);

  /* ══════════════════════════════════════════════════════════════════
     SYNTAX HIGHLIGHTING TOKENS
     Used by 02-semantic.css (PrismJS) and 07-chroma.css (Hugo Chroma).
     Hues are FIXED (like state colors) — not palette-driven.
     ══════════════════════════════════════════════════════════════════ */

  --syntax-comment:    var(--color-9);                /* muted — same as --text-dim */
  --syntax-punctuation: var(--color-9);               /* same muted level */
  --syntax-string:     oklch(75% 0.15 145);           /* green — same as --ok */
  --syntax-keyword:    oklch(72% 0.15 250);           /* blue — close to --link-hover */
  --syntax-function:   oklch(75% 0.15 250);           /* blue — close to --info */
  --syntax-number:     oklch(75% 0.15 80);            /* amber — same as --warn */
  --syntax-operator:   var(--color-5);                /* text-2 level */
  --syntax-property:   oklch(65% 0.15 250);           /* blue — same as --link */
  --syntax-variable:   oklch(75% 0.15 80);            /* amber */
  --syntax-deleted:    oklch(75% 0.15 25);            /* red — same as --error */
  --syntax-inserted:   oklch(75% 0.15 145);           /* green — same as --ok */
  --syntax-namespace:  oklch(75% 0.15 80);            /* amber */
  --syntax-url:        var(--link);                   /* urls look like links */
  --syntax-tag:        oklch(75% 0.15 25);            /* red for HTML tags */

  /* ── Utility tokens ─────────────────────────────────────────────── */

  --print-surface:     oklch(100% 0 0);    /* white for print */
  --print-text:        oklch(0% 0 0);      /* black for print */
  --absolute-black:    oklch(0% 0 0);      /* redaction, forced contrast */
  --absolute-white:    oklch(100% 0 0);    /* forced contrast */
  --hc-border:         var(--color-10);    /* high-contrast border (one step above --border) */
  --hc-text:           var(--color-1);     /* high-contrast text (brightest) */

}


/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — override semantic aliases only
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --surface:        var(--color-1);    /* 98% */
    --surface-1:      var(--color-2);    /* 97% */
    --surface-2:      var(--color-3);    /* 93% */
    --surface-card:   var(--color-1);
    --surface-hover:  var(--color-2);

    --text:           var(--color-14);   /* 20% */
    --text-2:         var(--color-12);   /* 35% */
    --text-3:         var(--color-10);   /* 49% */
    --text-dim:       var(--color-8);    /* 58% */

    --accent:         var(--color-9);    /* 53% — slightly darker for contrast on light */
    --accent-hover:   var(--color-10);
    --on-accent:      var(--color-1);

    --border:         var(--color-4);    /* 84% */
    --border-subtle:  var(--color-3);    /* 93% */

    --link:                  oklch(45% 0.15 250);
    --link-hover:            oklch(38% 0.15 250);
    --link-underline:        oklch(45% 0.08 250);
    --link-hover-underline:  oklch(38% 0.10 250);
    --link-focus:            oklch(45% 0.06 250);

    --h1-color: var(--color-16);
    --h2-color: var(--color-15);
    --h3-color: var(--color-14);
    --h4-color: var(--color-13);
    --h5-color: var(--color-12);
    --h6-color: var(--color-11);

    --ok:    oklch(40% 0.15 145);
    --warn:  oklch(40% 0.15 80);
    --error: oklch(40% 0.15 25);
    --info:  oklch(40% 0.15 250);

    --mark-bg:    oklch(92% 0.08 80);
    --mark-color: var(--color-15);
    --selection:  oklch(80% 0.06 250);

    /* Syntax — darker shades for light backgrounds */
    --syntax-comment:    var(--color-8);
    --syntax-punctuation: var(--color-10);
    --syntax-string:     oklch(40% 0.15 145);
    --syntax-keyword:    oklch(38% 0.15 250);
    --syntax-function:   oklch(40% 0.15 250);
    --syntax-number:     oklch(40% 0.15 80);
    --syntax-operator:   var(--color-11);
    --syntax-property:   oklch(45% 0.15 250);
    --syntax-variable:   oklch(40% 0.15 80);
    --syntax-deleted:    oklch(40% 0.15 25);
    --syntax-inserted:   oklch(40% 0.15 145);
    --syntax-namespace:  oklch(40% 0.15 80);
    --syntax-url:        var(--link);
    --syntax-tag:        oklch(40% 0.15 25);
  }
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE FONT SCALING
   Subtle upscaling at large viewports — all rem values follow.
   ══════════════════════════════════════════════════════════════════ */

@media (--lg-n-above)  { html { font-size: 103%; } }
@media (--xl-n-above)  { html { font-size: 106%; } }
@media (--xxl-n-above) { html { font-size: 109%; } }