/* GENERATED — do not edit.
 * Copied from indietix-workspace/docs/design-system/tokens.css by scripts/sync-design-tokens.sh
 * Change tokens there, re-run the script, commit this repo.
 */

/* IndieTix Design System — Utility Neo
 * GENERATED / HAND-SYNCED FROM tokens.json. Do not edit downstream copies.
 * Source of truth: indietix-workspace/docs/design-system/tokens.json
 * Distribute with: scripts/sync-design-tokens.sh
 * v0.2.0 · 2026-09-05
 */

:root {
  /* brand — coral is the only accent. Primary action + focus/active state only. */
  --it-coral: #FF6B6B;
  --it-coral-hover: #E85555;
  --it-coral-active: #D84A4A;

  /* text */
  --it-text: #0F0F14;
  --it-text-secondary: #55535C;
  --it-text-muted: #82808A;
  --it-on-dark: #FFFFFF;
  --it-on-coral: #FFFFFF;

  /* surfaces — never use pure #FFF as the page background; canvas is #FAFAFA */
  --it-canvas: #FAFAFA;
  --it-raised: #FFFFFF;
  --it-sunken: #F2F0EC;
  --it-surface-dark: #0F0F14;

  /* borders */
  --it-border: #E4E1DC;
  --it-border-strong: #D3CFC8;

  /* status — separate from the accent. Do not restyle these as coral. */
  --it-success-fg: #0A7D4B;
  --it-success-bg: #E7F5EE;
  --it-success-border: #BFE5D0;
  --it-warning-fg: #B4690E;
  --it-warning-bg: #FBF0E1;
  --it-warning-border: #EAD5B0;
  --it-danger-fg: #B42318;
  --it-danger-bg: #FBEAE8;
  --it-danger-border: #EBBDB7;

  /* typography */
  --it-font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* headline face — a grotesque (Archivo), weight 600. Not a serif. */
  --it-font-display: "Archivo", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --it-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --it-font-wordmark: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --it-weight-regular: 400;
  --it-weight-medium: 500;
  --it-weight-semibold: 600;

  --it-text-xs: 11px;
  --it-text-sm: 12px;
  --it-text-base: 13px;
  --it-text-md: 14px;
  --it-text-lg: 16px;
  --it-text-xl: 20px;
  --it-text-2xl: 24px;

  --it-leading-tight: 1.25;
  --it-leading-snug: 1.4;
  --it-leading-normal: 1.5;
  --it-leading-relaxed: 1.55;

  --it-tracking-tight: -0.01em;
  --it-tracking-label: 0.08em;
  --it-tracking-wordmark: -0.03em;

  /* space — 4px base */
  --it-space-1: 2px;
  --it-space-2: 4px;
  --it-space-3: 6px;
  --it-space-4: 8px;
  --it-space-5: 12px;
  --it-space-6: 16px;
  --it-space-7: 20px;
  --it-space-8: 24px;
  --it-space-9: 32px;
  --it-space-10: 40px;
  --it-space-11: 48px;
  --it-space-12: 64px;

  /* radius */
  --it-radius-sm: 4px;
  --it-radius-md: 6px;
  --it-radius-lg: 8px;
  --it-radius-pill: 999px;

  --it-border-width: 1px;

  /* shadow — flat system; use sparingly */
  --it-shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.06);
  --it-shadow-md: 0 4px 12px -2px rgba(15, 15, 20, 0.10);
  --it-shadow-focus: 0 0 0 3px rgba(255, 107, 107, 0.35);

  /* motion */
  --it-duration-fast: 120ms;
  --it-duration-base: 200ms;
  --it-ease: cubic-bezier(0.2, 0, 0, 1);

  /* layout */
  --it-measure: 68ch;
  --it-container: 1120px;
  --it-sidebar: 256px;
}

/* Dark mode — auto (system) unless an explicit light choice is set on :root */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --it-text: #F3F1EE;
    --it-text-secondary: #A5A2AC;
    --it-text-muted: #7A7883;

    --it-canvas: #141418;
    --it-raised: #1C1C21;
    --it-sunken: #18181C;

    --it-border: #2B2B31;
    --it-border-strong: #3A3A42;

    --it-success-fg: #4ED08A;
    --it-success-bg: #12261D;
    --it-success-border: #1F4433;
    --it-warning-fg: #E0A458;
    --it-warning-bg: #2A2013;
    --it-warning-border: #4A3A22;
    --it-danger-fg: #F08C82;
    --it-danger-bg: #2A1614;
    --it-danger-border: #4A2621;

    --it-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --it-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  }
}

/* Dark mode — explicit toggle wins in both directions */
:root[data-theme="dark"] {
  --it-text: #F3F1EE;
  --it-text-secondary: #A5A2AC;
  --it-text-muted: #7A7883;

  --it-canvas: #141418;
  --it-raised: #1C1C21;
  --it-sunken: #18181C;

  --it-border: #2B2B31;
  --it-border-strong: #3A3A42;

  --it-success-fg: #4ED08A;
  --it-success-bg: #12261D;
  --it-success-border: #1F4433;
  --it-warning-fg: #E0A458;
  --it-warning-bg: #2A2013;
  --it-warning-border: #4A3A22;
  --it-danger-fg: #F08C82;
  --it-danger-bg: #2A1614;
  --it-danger-border: #4A2621;

  --it-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --it-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}