/*
The theme contract for @elements/ui. The package's index.css imports the
base stylesheet, then this file, then the default theme; an app adds one
more theme import after @elements/ui to change the look.

Every token a theme controls is declared here with its default, and every
value matches the base stylesheet's default look, so this file alone changes
nothing on screen. A theme overrides all of them. Templates read ONLY tokens: never a literal color,
radius, font, size, shadow or duration.

The tiers are the vocabulary. Each kind of thing on screen reads its own
tier, so a theme can make controls square and dialogs round, or surfaces
flat and overlays lifted:

  control   buttons, inputs, selects, toggles, tab triggers
  item      rows inside a list or menu: menu items, options, calendar days
  surface   cards, panels, tables, accordions: things in the page flow
  overlay   popovers, menus, tooltips, toasts, hover cards
  dialog    modal dialogs, alert dialogs, sheets, drawers
  tag       badges, chips, kbd
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer tokens {
  :root {
    /* Type: families */

    --font-body:      var(--font-sans);    /* running text */
    --font-heading:   var(--font-sans);    /* h1-h4, titles, display */
    --font-ui:        var(--font-sans);    /* controls, menus, labels, tables */
    /* --font-mono is style/base's own and is part of the contract */

    /* Type: weights and tracking */

    --weight-body:      var(--weight-regular);      /* running text */
    --weight-heading:   var(--weight-semibold);     /* h1-h6 */
    --weight-ui:        var(--weight-medium);     /* control labels */
    --weight-strong:    var(--weight-semibold);   /* titles inside surfaces */
    --tracking-heading: var(--tracking-tight);      /* letter-spacing for headings */
    --tracking-ui:      var(--tracking-normal);     /* letter-spacing for control labels */
    --leading-heading:  var(--leading-tight);       /* line-height for headings */
    --case-ui:          none;                     /* text-transform for control labels */

    /* Type: role sizes */

    --text-display:   var(--text-5xl);              /* display and hero type */
    --text-h1:        var(--text-4xl);              /* h1 */
    --text-h2:        var(--text-3xl);              /* h2 */
    --text-h3:        var(--text-2xl);              /* h3 */
    --text-h4:        var(--text-xl);               /* h4 */
    --text-title:     var(--text-lg);     /* dialog, card, sheet title */
    --text-body:      var(--text-base);             /* running text */
    --text-ui:        var(--text-sm);     /* control and menu text */
    --text-ui-sm:     var(--text-xs);               /* small control text */
    --text-ui-lg:     var(--text-base);             /* large control text */
    --text-caption:   var(--text-xs);     /* descriptions under labels, meta */
    --text-label:     var(--text-sm);     /* form labels */

    /* CONTROL tier */

    --control-height:        2.5rem;                /* default control height */
    --control-height-sm:     2rem;                  /* small control height */
    --control-height-lg:     3rem;                  /* large control height */
    --control-padding-x:     1rem;                  /* inline padding inside a control */
    --control-padding-x-sm:  0.75rem;               /* inline padding, small control */
    --control-padding-x-lg:  1.25rem;               /* inline padding, large control */
    --control-gap:           var(--space-2);      /* icon to label */
    --control-border-width:  1px;                   /* control edge width */
    --control-border:        var(--rule);           /* control edge color */
    /* A field's bottom edge. A theme with a light field edge makes this one
       the 3:1 boundary, so the field stays identifiable without a heavy box. */
    --control-border-bottom: var(--control-border);
    /* Hover always darkens the edge it starts from. */
    --control-border-hover:        color-mix(in oklab, var(--control-border), var(--ink) 30%);
    --control-border-bottom-hover: color-mix(in oklab, var(--control-border-bottom), var(--ink) 30%);  /* the bottom edge on hover */
    --control-bg:            var(--bg);             /* control fill */
    --control-shadow:        none;                  /* control box-shadow */
    /* radius: --radius-control (style/base's slot) */

    /* ITEM tier */

    --item-height:       2rem;                      /* row height */
    --item-padding-x:    var(--space-2);            /* inline padding inside a row */
    --item-gap:          var(--space-2);            /* icon to label in a row */
    --radius-item:       var(--radius-sm);          /* row corner radius */
    --item-highlight:    var(--bg-muted);       /* hovered / keyboard-highlighted row */
    --item-highlight-ink: var(--ink);               /* text on a highlighted row */
    --item-selected:     var(--accent-soft);        /* selected row fill */
    --item-selected-ink: var(--ink);                /* text on a selected row */

    /* SURFACE tier */

    --surface-bg:            var(--bg);             /* card and panel fill */
    --surface-border-width:  1px;                   /* surface edge width */
    --surface-border:        var(--rule);           /* surface edge color */
    --surface-shadow:        var(--shadow-xs);      /* surface box-shadow */
    --surface-padding:       var(--space-6);        /* inner padding */
    --surface-padding-sm:    var(--space-4);        /* compact inner padding */
    --surface-gap:           var(--space-4);        /* space between a surface's parts */
    /* radius: --radius-surface */

    /* OVERLAY tier */

    --overlay-bg:            var(--bg-elevated);    /* overlay fill */
    --overlay-ink:           var(--ink);            /* text in an overlay */
    --overlay-border-width:  1px;                   /* overlay edge width */
    --overlay-border:        var(--rule);           /* overlay edge color */
    --overlay-shadow:        var(--shadow-lg);      /* overlay box-shadow */
    --overlay-padding:       var(--space-1);       /* menus, listboxes */
    --overlay-padding-lg:    var(--space-4);       /* popover, hover card */
    --tooltip-bg:            var(--bg-inverse);     /* tooltip fill */
    --tooltip-ink:           var(--ink-inverse);    /* tooltip text */
    /* radius: --radius-overlay */

    /* DIALOG tier */

    --dialog-bg:             var(--bg-elevated);    /* dialog, sheet and drawer fill */
    --dialog-border-width:   1px;                   /* dialog edge width */
    --dialog-border:         var(--rule);           /* dialog edge color */
    --dialog-shadow:         var(--shadow-2xl);     /* dialog box-shadow */
    --dialog-padding:        var(--space-6);        /* inner padding */
    --dialog-gap:            var(--space-4);        /* space between header, body and footer */
    --dialog-width:          32rem;                 /* dialog max-width */
    --backdrop:              rgb(8 12 20 / 0.5);    /* the scrim behind a modal */
    --backdrop-blur:         0px;                   /* blur behind the scrim */
    /* radius: --radius-dialog */

    /* TAG tier */

    --tag-height:     1.375rem;                     /* tag height */
    --tag-padding-x:  var(--space-2);               /* inline padding inside a tag */
    --tag-font-size:  var(--text-xs);               /* tag text size */
    --tag-weight:     var(--weight-medium);         /* tag text weight */
    /* radius: --radius-tag */

    /* EXTRA RADIUS roles (the rest are style/base's) */

    --radius-check:   var(--radius-xs);    /* checkbox box */

    /* Icons */

    --icon-size:      1rem;                         /* default icon size */
    --icon-size-sm:   0.875rem;                     /* small icon size */
    --icon-size-lg:   1.25rem;                      /* large icon size */
    --icon-stroke:    2;                            /* line icon stroke width, in 24-unit viewBox units */

    /* COLOR roles the semantic set does not name */

    --secondary:      var(--bg-muted);       /* secondary button fill */
    --secondary-ink:  var(--ink);                   /* secondary button text */
    --secondary-hover: var(--rule);                 /* secondary button fill on hover */
    --link:           var(--ink);            /* link-variant text */

    /* Focus */

    --focus-ring-width:   3px;                      /* ring thickness */
    --focus-ring-offset:  0px;                      /* gap between control and ring */
    --focus-ring-inner:   var(--bg);      /* the gap layer between control and ring, when offset > 0 */
    --focus-ring-color:   color-mix(in oklab, var(--focus) 45%, transparent);  /* ring color */

    /* Motion */

    --duration-enter:   var(--duration-normal);     /* overlays and disclosures opening */
    --duration-exit:    var(--duration-fast);       /* overlays and disclosures closing */
    --ease-enter:       var(--ease-out);            /* easing for opening */
    --ease-exit:        var(--ease-in);             /* easing for closing */
    --enter-scale:      0.96;     /* overlays and dialogs grow from this */
    --enter-distance:   0.5rem;   /* popovers slide this far from their side */
    --duration-loop:    var(--duration-slower);   /* looping animations multiply it; never 0 */
    --caret-blink:      1120ms;   /* one blink of a drawn text caret */

    /* Parts: sizes and colors particular templates read */

    --check-size:            1rem;                 /* checkbox and radio box; the switch derives from it */
    --control-outline:       color-mix(in oklab, var(--ink-faint), var(--ink) 30%);   /* unchecked check, radio, switch edge: 3:1 on --bg */
    --switch-thumb:          var(--white);         /* switch knob, off */
    --switch-thumb-checked:  var(--accent-ink);    /* switch knob, on */
    --indicator-width:       2px;                  /* active tab line */
    --link-underline-offset: 0.2em;                 /* gap between link text and its underline */
    --avatar-size:           var(--control-height);  /* avatar diameter */
    --avatar-size-sm:        var(--control-height-sm);  /* small avatar diameter */
    --avatar-size-lg:        var(--control-height-lg);  /* large avatar diameter */
    --progress-height:       var(--space-2);        /* progress bar thickness */
    --progress-height-sm:    var(--space-1);        /* thin progress bar */
    --progress-height-lg:    var(--space-3);        /* thick progress bar */
    --slider-thumb:          1rem;                  /* slider knob diameter */
    --slider-thickness:      0.375rem;              /* slider track thickness */
    --table-row-padding-y:   var(--space-2);       /* table body cells */
    --measure-narrow:        24rem;                /* centered short copy (Empty) */
    --toast-width:           var(--container-sm);   /* toast width */
    --scrollbar-size:        var(--space-2-5);     /* ScrollArea bar */
    --carousel-gap:          var(--space-4);        /* space between carousel slides */
    --drawer-canvas:         var(--bg-canvas);     /* around a page a Drawer scales back */
    --drawer-handle-width:   var(--space-24);       /* drag handle width */
    --drawer-handle-height:  var(--space-1-5);      /* drag handle thickness */
    --drawer-wrapper-inset:  var(--space-3);        /* side inset of the page a Drawer scales back */
    --sidebar-bg:            var(--bg-soft);        /* sidebar fill */
    --sidebar-ink:           var(--ink);            /* sidebar text */
    --sidebar-accent:        var(--item-highlight);  /* hovered or active sidebar item */
    --sidebar-accent-ink:    var(--item-highlight-ink);  /* text on that item */
    --sidebar-border:        var(--rule);           /* sidebar edge color */

    /* Code: syntax colors for CodeEditor and MessageResponse */

    --syntax-keyword:     var(--danger-ink);        /* keywords */
    --syntax-string:      var(--info-ink);          /* strings */
    --syntax-number:      var(--warning-ink);       /* numbers */
    --syntax-function:    var(--success-ink);       /* function names */
    --syntax-type:        var(--success-ink);       /* type names */
    --syntax-property:    var(--link);              /* properties and keys */
    --syntax-comment:     var(--ink-dim);           /* comments */
    --syntax-variable:    var(--ink);               /* variables */
    --syntax-punctuation: var(--ink-soft);          /* punctuation and operators */
    --code-selection:     color-mix(in oklab, var(--accent) 22%, transparent);  /* selected text in code */
    --code-font-size:     calc(var(--text-ui) * 0.9375);  /* code text size */

    /* Charts: the categorical series palette and mark radius */

    /* The dataviz reference palette (blue, orange, aqua, yellow, magenta,
       green, violet, red), validated for adjacent-pair color vision
       separation in both modes, written relative to --info-500 so a theme
       that moves its blue moves the palette. */
    --chart-1: light-dark(
      oklch(from var(--info-500) calc(l - 0.045) calc(c - 0.037) calc(h + 0.5)),
      oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.039) calc(h + 0.1)));
    --chart-2: light-dark(
      oklch(from var(--info-500) calc(l + 0.051) calc(c - 0.025) calc(h + 145.6)),
      oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.027) calc(h + 145.1)));  /* series 2: orange */
    --chart-3: light-dark(
      oklch(from var(--info-500) calc(l + 0.049) calc(c - 0.059) calc(h + 267.1)),
      oklch(from var(--info-500) calc(l + 0.001) calc(c - 0.072) calc(h + 268.1)));  /* series 3: aqua */
    --chart-4: light-dark(
      oklch(from var(--info-500) calc(l + 0.144) calc(c - 0.039) calc(h + 180.1)),
      oklch(from var(--info-500) calc(l + 0.05) calc(c - 0.057) calc(h + 178.2)));  /* series 4: yellow */
    --chart-5: light-dark(
      oklch(from var(--info-500) calc(l + 0.096) calc(c - 0.059) calc(h + 102.4)),
      oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.029) calc(h + 105.8)));  /* series 5: magenta */
    --chart-6: light-dark(
      oklch(from var(--info-500) calc(l - 0.091) calc(c - 0.02) calc(h + 247.5)),
      oklch(from var(--info-500) calc(l - 0.091) calc(c - 0.02) calc(h + 247.5)));  /* series 6: green */
    --chart-7: light-dark(
      oklch(from var(--info-500) calc(l - 0.093) calc(c - 0.003) calc(h + 28.4)),
      oklch(from var(--info-500) calc(l + 0.05) calc(c - 0.055) calc(h + 31.8)));  /* series 7: violet */
    --chart-8: light-dark(
      oklch(from var(--info-500) calc(l + 0.003) calc(c - 0.009) calc(h + 129.9)),
      oklch(from var(--info-500) calc(l + 0.049) calc(c - 0.041) calc(h + 127.3)));  /* series 8: red */
    --chart-radius: var(--radius-item);             /* corner radius of bars and marks */

    /* BRIDGES: style/base's own component slots follow the contract,
       so bare <button>, <input>, .card and the rest re-theme with it. */

    --button-height:       var(--control-height);   /* button height */
    --button-height-sm:    var(--control-height-sm);  /* small button height */
    --button-height-lg:    var(--control-height-lg);  /* large button height */
    --button-padding-x:    var(--control-padding-x);  /* button inline padding */
    --button-padding-x-sm: var(--control-padding-x-sm);  /* small button inline padding */
    --button-padding-x-lg: var(--control-padding-x-lg);  /* large button inline padding */
    --button-font-size:    var(--text-ui);          /* button text size */
    --button-font-size-lg: var(--text-ui-lg);       /* large button text size */
    --button-font-weight:  var(--weight-ui);        /* button text weight */
    --input-height:        var(--control-height);   /* input height */
    --input-height-sm:     var(--control-height-sm);  /* small input height */
    --input-height-lg:     var(--control-height-lg);  /* large input height */
    --input-font-size:     var(--text-ui);          /* input text size */
    --input-bg:            var(--control-bg);       /* input fill */
    --input-border:        var(--control-border);   /* input edge color */

    /* DERIVED: --focus-ring is rebuilt from the width, offset, inner layer
       and ring color, so a theme sets those four and never --focus-ring: a
       token one theme sets outside the contract leaks into every other look
       when the catalog loads them all. */

    --focus-ring: 0 0 0 var(--focus-ring-offset) var(--focus-ring-inner),
                  0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);  /* the focus box-shadow every focusable reads */
    --focus-ring-danger: 0 0 0 var(--focus-ring-offset) var(--focus-ring-inner),
                  0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--danger);  /* the same ring in the danger color, on an invalid field */
  }

  /* REDUCED MOTION: enter, exit and slow transitions go to zero, so every
     overlay and disclosure appears at once. --duration-loop is left alone:
     a spinner must keep turning (Spinner slows itself). Each theme repeats
     this block under its own look selector so it beats the theme's values. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-enter: 0s;
      --duration-exit:  0s;
      --duration-slow:  0s;
    }
  }
}

/* BRIDGES: bare elements read the contract's type roles. */
@layer base {
  html,
  body {
    font-family: var(--font-body);
    font-weight: var(--weight-body);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    var(--weight-heading);
    letter-spacing: var(--tracking-heading);
    line-height:    var(--leading-heading);
  }

  h1 { font-size: var(--text-h1); }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }
  h4 { font-size: var(--text-h4); }
}

@layer components {
  :where(button, .button, input, select, textarea, .tab,
         input[type="submit"], input[type="reset"], input[type="button"]) {
    font-family:    var(--font-ui);
    letter-spacing: var(--tracking-ui);
  }

  .card {
    background:    var(--surface-bg);
    border:        var(--surface-border-width) solid var(--surface-border);
    box-shadow:    var(--surface-shadow);
  }
}