/**
 * @file tokens.css
 * @description Design system CSS custom properties for Deleix Invoice Maker.
 * Strictly adheres to WCAG 2.2 AA contrast guidelines.
 */

:root {
  /* Color Tokens - Primary Brand Greens */
  --color-brand-forest-dark: #0B3D2E;
  --color-brand-forest: #0E6B49;
  --color-brand-emerald: #138A5B;
  --color-brand-emerald-light: #36B879;
  --color-brand-mint-subtle: #E7F6ED;
  --color-brand-mint-light: #F8FCF9;

  /* Typography & Ink */
  --color-ink-primary: #071A12;      /* WCAG AAA against white: 16.8:1 */
  --color-ink-secondary: #2D4A3E;    /* WCAG AAA against white: 8.2:1 */
  --color-ink-muted: #4A6357;        /* WCAG AA against white: 5.6:1 */
  --color-ink-inverse: #FFFFFF;

  /* Surfaces & Backgrounds */
  --color-surface-base: #FFFFFF;
  --color-surface-subtle: #F6FAF7;
  --color-surface-card: #FFFFFF;
  --color-surface-highlight: #EBF5EF;

  /* Borders & Dividers */
  --color-border-subtle: #D8E7DE;
  --color-border-strong: #ADCAB9;
  --color-border-focus: #0E6B49;

  /* Status Colors */
  --color-status-success: #0E6B49;
  --color-status-warning: #945B0A;
  --color-status-error: #B91C1C;
  --color-status-error-bg: #FEF2F2;

  /* Gradients (Used purposefully and sparingly) */
  --gradient-forest: linear-gradient(135deg, var(--color-brand-forest-dark) 0%, var(--color-brand-forest) 100%);
  --gradient-emerald: linear-gradient(135deg, var(--color-brand-emerald) 0%, var(--color-brand-emerald-light) 100%);
  --gradient-soft-mint: linear-gradient(180deg, var(--color-brand-mint-subtle) 0%, var(--color-brand-mint-light) 100%);

  /* Typography Scale */
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Spacing Scale (8pt base) */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-12: 3rem;    /* 48px */

  /* Touch Targets & Layout */
  --min-touch-target: 44px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* Shadows (Subtle & Restrained) */
  --shadow-sm: 0 1px 2px 0 rgba(7, 26, 18, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(7, 26, 18, 0.08), 0 2px 4px -1px rgba(7, 26, 18, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(7, 26, 18, 0.1), 0 4px 6px -2px rgba(7, 26, 18, 0.05);

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}