/* ==========================================================================
   Ayutor design tokens — single source of truth
   Source:  AYUTOR/DESIGN-TOOLKIT  tokens/ayutor-tokens.css
   Version: 2.1.0
   Copies in tool repos must stay byte-identical (compare sha256). Map local
   variable names onto --ay-* in a separate alias file; never edit a copy.

   Reference: Ayutor Calculator dark theme (designer, LIVE panel.css
   sha256 605a2759…) + designer brief docs/ayutor-visual-style.md.

   Themes
   - Dark is the default (:root, also [data-theme="dark"]).
     Light v2 is opt-in: [data-theme="light"] on <html>.
   - Every surface/text value is a color-mix of the brand primitives below
     (black only to deepen text and numbers). Text on violet fills is #222.

   Dark: graphite page #2B2B2B (calculator), cards one clear step up with a
   violet cast (#38383D) and a 1px top highlight, quiet violet panels
   (#353542), confident violet selection (#3B3B52 + #6161AC border).
   Light v2: lavender page (#D6D7EE), lavender cards (#E7E9F8) with violet
   borders and violet-tinted shadow, near-black text #202020, deep purple
   links #46467C, saturated lime/rose numbers deepened with black.

   Contrast (WCAG 2.1, normal text 4.5:1) on page/card/panel/input/selected
   - Dark: text 10+, muted 6.0+, link 4.7+, lime 5.8+, loss text 4.7+,
     warning 4.6+.
   - Light: text 10.6+, muted 7.1+, link 5.6+, profit 4.8+, loss 4.6+,
     warning 4.6+.
   - Warning = orange #FF8A3D (hue ~24°): distinct from rose loss, not gold.
     #222 on orange fill = 6.8:1.
   - Primary button: #222 on #8686E2 = 4.94:1. Lime badge text #222 = 8.6:1.
   - Brand violet/rose/lime stay fill colors; small text uses *-text tokens.
   ========================================================================== */

@font-face {
  font-family: "Ayutor Inter";
  src: url("./fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ay-tokens-version: "2.1.0";

  /* Brand primitives (theme-independent) */
  --ay-graphite: #2B2B2B;
  --ay-ice: #F3F5FF;
  --ay-violet: #8686E2;
  --ay-violet-deep: #6161AC;
  --ay-lime: #AACB36;
  --ay-rose: #f43f5e;
  --ay-orange: #FF8A3D;
  --ay-white: #FFFFFF;
  --ay-on-violet: #222222;
  --ay-black: #000000;

  /* Typography */
  --ay-font-sans: "Ayutor Inter", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ay-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --ay-text-label: 11px;
  --ay-text-xs: 12px;
  --ay-text-sm: 13px;
  --ay-text-md: 14px;
  --ay-text-lg: 16px;
  --ay-text-xl: 20px;
  --ay-text-2xl: 24px;
  --ay-weight-regular: 450;
  --ay-weight-medium: 550;
  --ay-weight-semibold: 650;
  --ay-weight-bold: 750;
  --ay-label-tracking: 0.04em;

  /* Shape */
  --ay-radius-xs: 6px;
  --ay-radius-sm: 8px;
  --ay-radius-md: 10px;
  --ay-radius-lg: 12px;
  --ay-radius-pill: 999px;
  --ay-border-width: 1px;

  /* Controls */
  --ay-control-h: 35px;
  --ay-control-h-sm: 28px;
  --ay-control-pad-x: 14px;

  --ay-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ay-duration: 150ms;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --ay-bg: var(--ay-graphite);
  --ay-surface: color-mix(in srgb, var(--ay-violet-deep) 6%, color-mix(in srgb, var(--ay-ice) 5%, var(--ay-graphite)));
  --ay-surface-2: color-mix(in srgb, var(--ay-violet-deep) 18%, var(--ay-graphite));
  --ay-surface-hover: color-mix(in srgb, var(--ay-ice) 9%, var(--ay-graphite));
  --ay-surface-input: color-mix(in srgb, var(--ay-ice) 7%, var(--ay-graphite));
  --ay-surface-sunken: color-mix(in srgb, var(--ay-black) 16%, var(--ay-graphite));
  --ay-surface-edge: inset 0 1px 0 color-mix(in srgb, var(--ay-ice) 6%, transparent);

  --ay-border: color-mix(in srgb, var(--ay-ice) 11%, transparent);
  --ay-border-strong: color-mix(in srgb, var(--ay-violet) 55%, transparent);
  --ay-border-selected: var(--ay-violet-deep);

  --ay-text: var(--ay-ice);
  --ay-text-muted: color-mix(in srgb, var(--ay-ice) 72%, transparent);
  --ay-text-disabled: color-mix(in srgb, var(--ay-ice) 40%, transparent);

  --ay-accent: var(--ay-violet);
  --ay-accent-hover: color-mix(in srgb, var(--ay-violet) 88%, var(--ay-ice));
  --ay-on-accent: var(--ay-on-violet);
  --ay-accent-text: color-mix(in srgb, var(--ay-violet) 72%, var(--ay-ice));
  --ay-accent-soft: color-mix(in srgb, var(--ay-violet-deep) 30%, var(--ay-graphite));
  --ay-info: var(--ay-violet-deep);
  --ay-on-info: var(--ay-ice);

  --ay-profit: var(--ay-lime);
  --ay-profit-text: var(--ay-lime);
  --ay-profit-soft: color-mix(in srgb, var(--ay-lime) 16%, var(--ay-graphite));
  --ay-profit-border: color-mix(in srgb, var(--ay-lime) 48%, transparent);

  --ay-loss: var(--ay-rose);
  --ay-loss-text: color-mix(in srgb, var(--ay-rose) 58%, var(--ay-ice));
  --ay-loss-soft: color-mix(in srgb, var(--ay-rose) 14%, var(--ay-graphite));
  --ay-loss-border: color-mix(in srgb, var(--ay-rose) 48%, transparent);

  --ay-warning: var(--ay-orange);
  --ay-on-warning: var(--ay-on-violet);
  --ay-warning-text: var(--ay-orange);
  --ay-warning-soft: color-mix(in srgb, var(--ay-orange) 14%, var(--ay-graphite));
  --ay-warning-border: color-mix(in srgb, var(--ay-orange) 48%, transparent);

  --ay-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ay-violet) 45%, transparent);
  --ay-shadow-sm: var(--ay-surface-edge), 0 1px 2px rgba(0, 0, 0, 0.3);
  --ay-shadow-card: var(--ay-surface-edge), 0 6px 18px rgba(0, 0, 0, 0.28);
  --ay-shadow-overlay: var(--ay-surface-edge), 0 14px 40px rgba(0, 0, 0, 0.5);
  --ay-scrim: rgba(0, 0, 0, 0.55);

  --ay-chart-1: var(--ay-violet);
  --ay-chart-2: color-mix(in srgb, var(--ay-violet-deep) 80%, var(--ay-ice));
  --ay-chart-3: var(--ay-lime);
  --ay-chart-4: color-mix(in srgb, var(--ay-ice) 45%, var(--ay-graphite));
  --ay-chart-grid: color-mix(in srgb, var(--ay-ice) 8%, transparent);
}

[data-theme="light"] {
  color-scheme: light;

  --ay-bg: color-mix(in srgb, var(--ay-violet-deep) 20%, var(--ay-ice));
  --ay-surface: color-mix(in srgb, var(--ay-violet-deep) 8%, var(--ay-ice));
  --ay-surface-2: color-mix(in srgb, var(--ay-violet-deep) 15%, var(--ay-ice));
  --ay-surface-hover: color-mix(in srgb, var(--ay-violet-deep) 11%, var(--ay-ice));
  --ay-surface-input: color-mix(in srgb, var(--ay-violet-deep) 3%, var(--ay-ice));
  --ay-surface-sunken: color-mix(in srgb, var(--ay-violet-deep) 24%, var(--ay-ice));
  --ay-surface-edge: inset 0 1px 0 color-mix(in srgb, var(--ay-white) 55%, transparent);

  --ay-border: color-mix(in srgb, var(--ay-violet-deep) 26%, transparent);
  --ay-border-strong: color-mix(in srgb, var(--ay-violet-deep) 60%, transparent);
  --ay-border-selected: var(--ay-violet-deep);

  --ay-text: color-mix(in srgb, var(--ay-black) 25%, var(--ay-graphite));
  --ay-text-muted: color-mix(in srgb, var(--ay-violet-deep) 40%, color-mix(in srgb, var(--ay-black) 25%, var(--ay-graphite)));
  --ay-text-disabled: color-mix(in srgb, var(--ay-violet-deep) 50%, var(--ay-ice));

  --ay-accent: var(--ay-violet);
  --ay-accent-hover: color-mix(in srgb, var(--ay-violet) 85%, var(--ay-violet-deep));
  --ay-on-accent: var(--ay-on-violet);
  --ay-accent-text: color-mix(in srgb, var(--ay-violet-deep) 72%, var(--ay-black));
  --ay-accent-soft: color-mix(in srgb, var(--ay-violet-deep) 26%, var(--ay-ice));
  --ay-info: var(--ay-violet-deep);
  --ay-on-info: var(--ay-ice);

  --ay-profit: var(--ay-lime);
  --ay-profit-text: color-mix(in srgb, var(--ay-lime) 46%, var(--ay-black));
  --ay-profit-soft: color-mix(in srgb, var(--ay-lime) 24%, var(--ay-ice));
  --ay-profit-border: color-mix(in srgb, var(--ay-lime) 75%, var(--ay-black));

  --ay-loss: var(--ay-rose);
  --ay-loss-text: color-mix(in srgb, var(--ay-rose) 66%, var(--ay-black));
  --ay-loss-soft: color-mix(in srgb, var(--ay-rose) 14%, var(--ay-ice));
  --ay-loss-border: color-mix(in srgb, var(--ay-rose) 70%, transparent);

  --ay-warning: var(--ay-orange);
  --ay-on-warning: var(--ay-on-violet);
  --ay-warning-text: color-mix(in srgb, var(--ay-orange) 52%, var(--ay-black));
  --ay-warning-soft: color-mix(in srgb, var(--ay-orange) 18%, var(--ay-ice));
  --ay-warning-border: color-mix(in srgb, var(--ay-orange) 70%, transparent);

  --ay-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ay-violet-deep) 40%, transparent);
  --ay-shadow-sm: var(--ay-surface-edge), 0 1px 2px color-mix(in srgb, var(--ay-violet-deep) 22%, transparent);
  --ay-shadow-card: var(--ay-surface-edge), 0 6px 18px color-mix(in srgb, var(--ay-violet-deep) 18%, transparent);
  --ay-shadow-overlay: var(--ay-surface-edge), 0 14px 40px color-mix(in srgb, var(--ay-violet-deep) 30%, transparent);
  --ay-scrim: color-mix(in srgb, var(--ay-graphite) 50%, transparent);

  --ay-chart-1: var(--ay-violet-deep);
  --ay-chart-2: var(--ay-violet);
  --ay-chart-3: color-mix(in srgb, var(--ay-lime) 80%, var(--ay-black));
  --ay-chart-4: color-mix(in srgb, var(--ay-violet-deep) 35%, var(--ay-ice));
  --ay-chart-grid: color-mix(in srgb, var(--ay-violet-deep) 14%, transparent);
}