/* 00 - Tokens: CSS custom properties for explain-ink */
[data-theme="explain-ink"] {
  /* Text colors */
  --color-text-primary: #f1ede4;
  /* THE LADDER HAD NO STEPS. secondary, tertiary and disabled were all at 0.64, each over a slightly
     different off-white -- three near-identical greys pretending to be three levels. A caption in
     "tertiary" therefore came out as loud as body text, which is what made a style subtitle sit on
     top of the title it belongs under instead of beneath it, and a disabled control read as enabled.
     One base colour now, the same chalk as the primary text, and the alpha does the ranking. */
  --color-text-secondary: rgba(241, 237, 228, 0.64);
  --color-text-tertiary: rgba(241, 237, 228, 0.36);
  --color-text-disabled: rgba(241, 237, 228, 0.30);
  --color-text-contrast: #000000;
  --color-text-accent: #e9573f;
  --color-text-on-accent: #ffffff;
  --color-text-success: #22c55e;
  --color-text-on-success: #ffffff;
  --color-text-warning: #f59e0b;
  --color-text-error: #ef4444;
  --color-text-info: #3b82f6;

  /* Background colors
     WARMED 2026-08-26. These were #1e1d22 / #26242c / #353438, which are grey with a blue-violet
     cast, while the text above them is warm chalk (#f1ede4) and the accent is coral. The template
     README is explicit that every bg/text/border token must share one temperature, because nothing
     correlates them automatically and mixed ones give unpredictable hover and selected states -- and
     a cool ground under warm ink is what made the product read as a default dark admin panel rather
     than as a desk. The ladder keeps its three steps, it is only rotated warm.
     Hover is chalk-tinted rather than pure white for the same reason. */
  --color-bg-primary: #100e0d;
  --color-bg-secondary: #1a1615;
  --color-bg-tertiary: #241e1c;
  --color-bg-surface: #1a1615;
  --color-bg-hover: rgba(241, 237, 228, 0.05);
  --color-bg-disabled: #241e1c;

  /* Accent backgrounds */
  --color-bg-accent: #461a13;
  --color-bg-accent-solid: #e9573f;
  --color-bg-accent-light: #461a13;
  --color-bg-accent-hover: #eb6852;
  --color-bg-accent-glow: rgba(233, 87, 63, 0.15);

  /* Semantic backgrounds */
  --color-bg-success: #22c55e;
  --color-bg-success-light: #0a3b1c;
  --color-bg-success-hover: #38cb6e;
  --color-bg-warning: #f59e0b;
  --color-bg-warning-light: #4a2f03;
  --color-bg-warning-hover: #f6a823;
  --color-bg-error: #ef4444;
  --color-bg-error-light: #481414;
  --color-bg-error-hover: #f15757;
  --color-bg-info: #3b82f6;
  --color-bg-info-light: #12274a;
  --color-bg-info-hover: #4f8ff7;

  /* Border colors */
  --color-border-primary: rgba(241, 237, 228, 0.14);
  --color-border-secondary: rgba(193, 190, 182, 0.14);
  --color-border-tertiary: rgba(145, 142, 137, 0.14);
  --color-border-disabled: rgba(169, 166, 160, 0.14);
  --color-border-focus: rgba(241, 237, 228, 0.14);
  --color-border-error: #ef4444;
  --color-border-info: #3b82f6;
  --color-border-success: #22c55e;
  --color-border-warning: #f59e0b;

  /* Ring colors */
  --color-ring-focus: rgba(233, 87, 63, 0.5);
  --color-ring-error: rgba(239, 68, 68, 0.5);
  --color-ring-offset: #100e0d;

  /* Accent colors */
  --color-accent-primary: #e9573f;
  --color-accent-secondary: #ed7965;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;

  /* Component spacing */
  --input-padding: 0.5rem 0.75rem;
  --button-padding: 0.625rem 1rem;
  --card-padding: 1.5rem;

  /* Border radius */
  --radius-sm: calc(0.6rem * 0.5);
  --radius-md: 0.6rem;
  --radius-lg: calc(0.6rem * 1.5);
  --radius-xl: calc(0.6rem * 2);
  --radius-full: 9999px;
  --radius-button: 0.6rem;
  --radius-card: 0.9rem;

  /* Shadows
     lg and xl were `none`, which made a card variant literally named "elevated" sit flat on the page
     and left modals, dropdowns and the date picker floating with nothing under them. On a dark warm
     ground that is what read as "everything is painted on one sheet". sm and md stay off: the small
     steps are meant to be flat here, only the things that genuinely float get a shadow.
     Warm-black rather than neutral, and lifted well off the element, so it reads as depth and not as
     a grey outline. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 10px 30px -12px rgba(0, 0, 0, 0.70);
  /* The hairline lives HERE and not in --glass-shadow. card-base composes --glass-shadow, but every
     card in the product is rendered with a variant, and the variant's own box-shadow wins -- the same
     override that hid the glass fill. --shadow-xl is therefore the only shadow lever that actually
     reaches a card people see, so it carries both the lit top edge and the depth. Modals get the
     hairline too, which suits them. */
  --shadow-xl: inset 0 1px 0 rgba(241, 237, 228, 0.06), 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --shadow-accent: 0 6px 20px rgba(233, 87, 63, 0.25);
  /* --focus-glow was already being read by the primary button's hover rule and was never defined
     anywhere, so that rule resolved to `none` and the hover did nothing but change colour. Defining
     it lights every control that asks for it: a hairline ring in the accent plus a soft bloom, which
     is the "slight glow" a dark glass button needs to answer a pointer without inflating. */
  --focus-glow: 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 38%, transparent),
                0 0 18px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);

  /* Typography */
  --font-family-base: 'Nunito', system-ui, sans-serif;
  --font-family-heading: 'Cabin Sketch', 'Nunito', cursive;
  --font-family-mono: 'JetBrains Mono', monospace;
  --font-size-base: 1rem;
  --line-height-base: 1.5;
  --font-weight-heading: 700;

  /* Component settings */
  --focus-ring-width: 2px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --component-outline-text: #f1ede4;
  --component-outline-bg: rgba(26, 22, 21, 0.55);
  --component-outline-border: rgba(241, 237, 228, 0.14);
  --component-outline-hover-bg: #461a13;
  --component-outline-hover-border: #e9573f;
  --component-checkbox-border: rgba(193, 190, 182, 0.14);
  --component-checkbox-border-checked: #e9573f;
  --component-checkbox-fill: transparent;
  --component-checkbox-fill-checked: #e9573f;
  --component-input-background: #1a1615;
  --component-input-border: rgba(193, 190, 182, 0.14);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Interaction effects */
  --hover-scale: 1;
  --hover-brightness: 1;
  --hover-translate-y: 0;

  /* Gradient controls */
  --button-primary-fill: #e9573f;
  --button-secondary-fill: rgba(26, 22, 21, 0.55);
  --button-gradient-active: 0;
  --card-surface-fill: rgba(26, 22, 21, 0.72);
  --card-gradient-active: 0;
  --app-background-fill: #100e0d;
  --app-background-gradient-active: 0;
  --button-gradient-intensity: 1;
  --card-gradient-intensity: 1;
  --button-gloss-gradient: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.45), transparent 55%), radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.15), transparent 65%), linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
  --button-gloss-opacity: 0.35;
  --button-gloss-hover-opacity: 0.55;
  --button-gloss-active-opacity: 0.25;
  /* THE CONVEX HIGHLIGHT IS OFF. This drives a ::before on every button carrying
     --button-gloss-gradient, which is three white radials blended with `screen`: it makes a button
     look like a moulded plastic pill catching a studio light. On a warm ink ground next to
     hand-drawn artwork that is the one thing on the page pretending to be a physical object, and it
     was the loudest surface in the product. Buttons are dark glass with a hairline instead.
     The gradient itself is left defined, so switching this back to 1 restores it exactly. */
  --button-gloss-enabled: 0;

  /* THE SHEEN: a highlight that crosses the primary button every few seconds and then waits. It is
     the moving cousin of the gloss above and replaces it -- a static convex highlight says "plastic",
     a band that passes once in a while says "this one is alive".
     --button-sheen-color IS the switch: set it to `transparent` and the sweep is invisible while
     costing nothing worth measuring.
     It runs ONLY under the pointer. On a timer it was charming on a screen with one primary button
     and tiring on a screen with four -- the video page carries three Download buttons and they all
     glinted in unison. The period is short because it now has to complete while a hand is resting on
     the button, not fill a quiet minute. */
  --button-sheen-color: rgba(255, 255, 255, 0.38);
  --button-sheen-period: 2.2s;

  /* Glassmorphism - computed CSS values
     THE LIVE LEVER IS --card-backdrop. Only it and --card-surface-fill / --glass-card-overlay /
     --glass-shadow are actually read by 06-components.css; --glass-blur, --glass-opacity,
     --glass-border and --glass-apply-to-cards are the theme editor's inputs, which it turns into the
     ones above. They are kept in step here so the editor does not show "no blur" over a blurred
     card, but nothing reads them at runtime -- do not expect a change to them alone to do anything.
     0.72 is the fill opacity: enough for the lit ground and the pointer light to come through, not
     so much that text on the card loses its footing. */
  --glass-blur: 14px;
  --glass-opacity: 0.72;
  --glass-gradient: none;
  --glass-gradient-strength: 0;
  --glass-border: rgba(241, 237, 228, 0.10);
  --glass-shadow: none;   /* inert on real cards: see the note on --shadow-xl */
  --glass-card-overlay: linear-gradient(150deg, rgba(60, 50, 46, 0.08), rgba(80, 68, 62, 0.02));
  --card-backdrop: blur(14px) saturate(115%);
  --card-bg-opacity: 0.72;
  --glow-intensity: 0;
  --glass-apply-to-cards: 1;
  --glass-apply-to-shell: 0;
  --color-bg-secondary-glass: rgba(26, 22, 21, 0.72);
  --color-bg-primary-glass: rgba(16, 14, 13, 1);

  /* Effect flags (0 = disabled, 1 = enabled) */
  --effect-neon: 0;
  --effect-shimmer: 0;
  --effect-tilt: 0;
  --effect-magnetic: 0;
  --effect-glow-badges: 0;
  --effect-neon-scrollbar: 0;
  --effect-link-glow: 0;
  --effect-table-glow: 0;
  --effect-progress-glow: 0;
  --effect-input-glow: 0;
  --effect-modal-glass: 0;
  --effect-dropdown-glass: 0;
  --effect-checkbox-glow: 0;
  --effect-heading-glow: 0;
  --effect-button-glow: 0;

  /* Effect colors */
  --neon-primary: rgba(233, 87, 63, 0.5);
  --neon-secondary: rgba(237, 121, 101, 0.5);
}