/* ==========================================================================
   TOOLNOVA DESIGN SYSTEM — TOKENS
   The single source of truth for every ToolNova product. Nothing outside
   this file should hardcode a color, spacing value, radius, shadow, or
   duration — components reference these variables so the whole system
   can be retheme'd or rescaled from one place.
   ========================================================================== */

:root {
  /* ---------- Color: surfaces ---------- */
  --tn-color-void: #0E1117;
  --tn-color-panel: #171B22;
  --tn-color-panel-raised: #1D222B;
  --tn-color-glass: rgba(23, 27, 34, 0.55);
  --tn-color-glass-border: rgba(255, 255, 255, 0.08);
  --tn-color-hairline: rgba(255, 255, 255, 0.07);

  /* ---------- Color: text ---------- */
  --tn-color-text: #F4F5F7;
  --tn-color-text-muted: #9096A3;
  --tn-color-text-faint: #5C6270;
  --tn-color-text-on-accent: #17110F;

  /* ---------- Color: brand & semantic accents ---------- */
  --tn-color-coral: #FF6B6B;
  --tn-color-coral-bright: #FF8585;
  --tn-color-coral-dim: rgba(255, 107, 107, 0.14);
  --tn-color-coral-text: var(--tn-color-coral);
  --tn-color-blue: #4C9AFF;
  --tn-color-blue-dim: rgba(76, 154, 255, 0.14);
  --tn-color-mint: #34D399;
  --tn-color-mint-dim: rgba(52, 211, 153, 0.14);
  --tn-color-mint-text: var(--tn-color-mint);
  --tn-color-amber: #FBBF24;
  --tn-color-amber-dim: rgba(251, 191, 36, 0.14);
  --tn-color-danger: #F87171;
  --tn-color-danger-dim: rgba(248, 113, 113, 0.14);

  /* ---------- Typography ---------- */
  --tn-font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', sans-serif;
  --tn-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --tn-text-2xs: 0.6875rem;  /* 11px */
  --tn-text-xs:  0.75rem;    /* 12px */
  --tn-text-sm:  0.8125rem;  /* 13px */
  --tn-text-base:0.875rem;   /* 14px */
  --tn-text-md:  0.9375rem;  /* 15px */
  --tn-text-lg:  1.0625rem;  /* 17px */
  --tn-text-xl:  1.375rem;   /* 22px */
  --tn-text-2xl: 2rem;       /* 32px */
  --tn-text-3xl: clamp(2.125rem, 5vw, 3.375rem);

  --tn-weight-regular: 400;
  --tn-weight-medium: 500;
  --tn-weight-semibold: 600;
  --tn-weight-bold: 700;

  --tn-leading-tight: 1.1;
  --tn-leading-normal: 1.5;
  --tn-leading-relaxed: 1.65;

  /* ---------- Spacing scale (4px base unit) ---------- */
  --tn-space-1: 4px;
  --tn-space-2: 8px;
  --tn-space-3: 12px;
  --tn-space-4: 16px;
  --tn-space-5: 20px;
  --tn-space-6: 24px;
  --tn-space-8: 32px;
  --tn-space-10: 40px;
  --tn-space-12: 48px;
  --tn-space-16: 64px;

  /* ---------- Radius ---------- */
  --tn-radius-sm: 11px;
  --tn-radius-md: 16px;
  --tn-radius-lg: 22px;
  --tn-radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --tn-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.25);
  --tn-shadow-md: 0 20px 50px rgba(0, 0, 0, 0.25);
  --tn-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.4);
  --tn-shadow-glow-coral: 0 6px 20px rgba(255, 107, 107, 0.3);
  --tn-shadow-glow-blue: 0 6px 20px rgba(76, 154, 255, 0.3);
  --tn-shadow-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ---------- Motion ---------- */
  --tn-duration-fast: 150ms;
  --tn-duration-base: 200ms;
  --tn-duration-slow: 400ms;
  --tn-duration-slower: 600ms;
  --tn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Blur (glassmorphism) ---------- */
  --tn-blur-sm: blur(12px);
  --tn-blur-md: blur(20px) saturate(140%);
  --tn-blur-lg: blur(28px) saturate(150%);

  /* ---------- Z-index scale ---------- */
  --tn-z-base: 1;
  --tn-z-sticky: 50;
  --tn-z-overlay: 80;
  --tn-z-dialog: 90;
  --tn-z-toast: 100;
  --tn-z-tooltip: 110;
}

/* ==========================================================================
   LIGHT THEME — same variable names, different values. Components never
   branch on theme directly; they only ever read the variable.
   ========================================================================== */
[data-theme="light"] {
  --tn-color-void: #F6F5F3;
  --tn-color-panel: #FFFFFF;
  --tn-color-panel-raised: #FFFFFF;
  --tn-color-glass: rgba(255, 255, 255, 0.6);
  --tn-color-glass-border: rgba(15, 15, 20, 0.07);
  --tn-color-hairline: rgba(15, 15, 20, 0.08);

  --tn-color-text: #14151A;
  --tn-color-text-muted: #63666F;
  --tn-color-text-faint: #62656B;

  /* Brand accent colours used as small text fail WCAG AA contrast in
     light theme specifically (confirmed via Lighthouse + computed
     against their real backgrounds) - dark theme's values already
     pass comfortably and are left unchanged via the default tokens
     above. */
  --tn-color-coral-text: #AB4848;
  --tn-color-mint-text: #1E7857;

  --tn-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.06);
  --tn-shadow-md: 0 20px 50px rgba(0, 0, 0, 0.08);
  --tn-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   REDUCED MOTION — every component's animations key off durations/eases
   above, so zeroing them here is a single, global, guaranteed-complete
   accessibility guarantee rather than something each component must
   remember to implement individually.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tn-duration-fast: 0.001ms;
    --tn-duration-base: 0.001ms;
    --tn-duration-slow: 0.001ms;
    --tn-duration-slower: 0.001ms;
  }
}