/**
 * 01-asw.css
 * ASW semantic layer — builds on Open Props
 *
 * Open Props (imported in main.css) provides the base scales:
 *   --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:
 *   Override semantic aliases at :root in your own CSS.
 *   Use Open Props base tokens (--gray-*, --green-*, --size-*) as values.
 *
 * 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 gray scale — perceptually uniform steps.
   Set --gray-hue to tint all surfaces. Example:
     Trentuna:     --gray-hue: 45   (warm amber tint)
     vigilio-garden: --gray-hue: 150  (subtle green tint)
   ══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Surfaces ──────────────────────────────────────────────────── */

  --surface:        var(--gray-12);   /* deepest background (oklch 10%) */
  --surface-1:      var(--gray-11);   /* cards, sidebars       (oklch 18%) */
  --surface-2:      var(--gray-10);   /* hover, raised elements (oklch 25%) */
  --surface-card:   var(--surface-1);
  --surface-hover:  var(--surface-2);

  /* ── Text ──────────────────────────────────────────────────────── */

  --text:           var(--gray-1);    /* primary   (95% lightness) */
  --text-2:         var(--gray-3);    /* secondary (80%) */
  --text-3:         var(--gray-5);    /* muted     (68%) */
  --text-dim:       var(--gray-7);    /* dim       (58%) */

  /* ── Accent ────────────────────────────────────────────────────── */

  --accent:              var(--green-5);
  --accent-hover:        var(--green-4);
  --on-accent:           var(--gray-12);
  --accent-focus:            color-mix(in oklch, var(--green-5) 35%, transparent);
  --accent-subtle:           color-mix(in oklch, var(--green-5) 10%, transparent);
  --accent-underline:        color-mix(in oklch, var(--green-5) 45%, transparent);
  --accent-hover-underline:  color-mix(in oklch, var(--green-5) 55%, transparent);

  /* ── Links ─────────────────────────────────────────────────────── */
  /* Blue — web convention. Accent (green) reserved for UI chrome.   */

  --link:                  var(--blue-5);            /* #339af0 */
  --link-hover:            var(--blue-4);            /* #4dabf7 */
  --link-underline:        color-mix(in oklch, var(--blue-5) 40%, transparent);
  --link-hover-underline:  color-mix(in oklch, var(--blue-5) 55%, transparent);
  --link-focus:            color-mix(in oklch, var(--blue-5) 35%, transparent);

  /* Secondary accents — reachable as named aliases */
  --accent-blue:    var(--blue-5);
  --accent-red:     var(--red-7);
  --accent-orange:  var(--yellow-6);

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

  --border:         var(--gray-11);   /* 37% lightness — visible against 10% bg */
  --border-subtle:  var(--gray-12);   /* 31% lightness — very subtle */
  --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(--text);
  --h2-color: var(--text);
  --h3-color: var(--text);
  --h4-color: var(--text-2);
  --h5-color: var(--text-2);
  --h6-color: var(--text-3);

  /* ── 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(--green-5) 10%, transparent);
  --diff-remove-bg:   color-mix(in oklch, var(--red-7) 10%, transparent);
  --diff-remove-text: var(--red-2);
  --diff-hunk-bg:     color-mix(in oklch, var(--blue-4) 7%, transparent);

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

  --ai-generated-border: color-mix(in oklch, var(--green-5) 25%, transparent);
  --ai-assisted-border:  color-mix(in oklch, var(--blue-4) 20%, transparent);
  --ai-mixed-border:     color-mix(in oklch, var(--yellow-6) 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:   color-mix(in oklch, var(--blue-4) 25%, transparent);
  --mark-bg:     color-mix(in oklch, var(--yellow-6) 20%, transparent);
  --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(--gray-11) 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(--green-5) 20%, transparent);
  --input-px:         var(--space-4);
  --input-py:         var(--space-3);
  --disabled-opacity: 0.5;

  /* ── State colors ─────────────────────────────────────────────────── */

  --ok:           var(--green-5);
  --warn:         var(--yellow-5);
  --error:        var(--red-7);
  --info:         var(--blue-5);
  --blocked:      var(--gray-5);

  --error-active: var(--red-9);
  --error-focus:  color-mix(in oklch, var(--red-7) 38%, transparent);

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

  --track-bg:         var(--surface-2);   /* progress / meter background */
  --modal-overlay:    color-mix(in oklch, var(--gray-12) 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(--green-5);
  --task-blocked: var(--red-5);
  --task-wip:     var(--yellow-5);
  --task-todo:    var(--gray-5);

  --callout-info:  var(--blue-5);
  --callout-warn:  var(--yellow-5);
  --callout-error: var(--red-5);
  --callout-note:  var(--gray-5);

  --session-bg:   var(--surface-1);
  --wikilink:     var(--blue-4);
  --redacted:     var(--gray-8);

}


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

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

    --surface:        var(--gray-0);    /* 99% lightness */
    --surface-1:      var(--gray-1);    /* 95% */
    --surface-2:      var(--gray-2);    /* 88% */
    --surface-card:   var(--gray-0);
    --surface-hover:  var(--gray-1);

    --text:           var(--gray-11);   /* 18% — dark but not pure black */
    --text-2:         var(--gray-11);   /* 37% */
    --text-3:         var(--gray-8);    /* 53% */
    --text-dim:       var(--gray-6);    /* 63% */

    --accent:         var(--green-8);
    --accent-hover:   var(--green-9);
    --on-accent:      var(--gray-0);
    --accent-focus:   color-mix(in oklch, var(--green-8) 35%, transparent);
    --accent-subtle:  color-mix(in oklch, var(--green-8) 10%, transparent);

    --border:         var(--gray-3);    /* 80% — visible on near-white */
    --border-subtle:  var(--gray-2);    /* 88% — very subtle */

    --link:                  var(--blue-8);            /* #1971c2 */
    --link-hover:            var(--blue-7);            /* #1c7ed6 */
    --link-underline:        color-mix(in oklch, var(--blue-8) 40%, transparent);
    --link-hover-underline:  color-mix(in oklch, var(--blue-8) 55%, transparent);
    --link-focus:            color-mix(in oklch, var(--blue-8) 35%, transparent);

    --h1-color: var(--gray-12);
    --h2-color: var(--gray-11);
    --h3-color: var(--gray-10);
    --h4-color: var(--gray-12);
    --h5-color: var(--gray-11);
    --h6-color: var(--gray-10);

    --mark-bg:    color-mix(in oklch, var(--yellow-6) 15%, var(--surface));
    --mark-color: var(--gray-12);
    --selection:  color-mix(in oklch, var(--blue-8) 20%, transparent);

    --code-color:   var(--text-3);
    --table-stripe: color-mix(in oklch, var(--gray-8) 4%, transparent);

    --input-bg:        var(--gray-0);
    --input-border:    var(--gray-4);
    --input-active-bg: var(--gray-0);
    --input-selected:  var(--gray-2);

    --track-bg:       var(--gray-3);
    --modal-overlay:  color-mix(in oklch, var(--gray-2) 75%, transparent);

    --error:          oklch(50% 0.17 20);
    --error-active:   oklch(44% 0.18 20);

    --session-bg:     var(--surface-1);
  }
}


/* ══════════════════════════════════════════════════════════════════
   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%; } }