/* tokens.css — autoshinecare design system tokens */
/* Single source of truth for all design values. */

:root {
  /* ── Color Palette ──────────────────────────────── */
  --color-bg:                   #0A0A0A;
  --color-surface-1:             #111111;
  --color-surface-2:             #1A1A1A;
  --color-surface-3:             #242424;
  --color-surface-light:         #F4F1EC;
  --color-surface-light-2:       #EAE7E1;
  --color-accent:                #C8853A;
  --color-accent-hover:          #D99A50;
  --color-accent-active:         #A66B2A;
  --color-accent-muted:          rgba(200, 133, 58, 0.1);
  --color-text-primary:          #EDEDED;
  --color-text-secondary:        #A8A8A8;
  --color-text-tertiary:         #6B6B6B;
  --color-text-on-light:         #1A1A1A;
  --color-text-secondary-on-light: #4A4A4A;
  --color-text-tertiary-on-light: #7A7A7A;
  --color-text-on-accent:        #0A0A0A;
  --color-heading:               #FFFFFF;
  --color-heading-on-light:      #0F0F0F;
  --color-border:                #2E2E2E;
  --color-border-light:          #D4D0C8;
  --color-border-accent:         #C8853A;
  --color-focus-ring:            #C8853A;
  --color-error:                 #E05555;
  --color-success:               #4CAF50;
  --color-overlay:               rgba(0, 0, 0, 0.72);
  --color-nav-bg:                #0D0D0D;

  /* ── Typography ─────────────────────────────────── */
  --font-display:  'Syne', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.25rem;    /* 52px */
  --text-5xl:   4rem;       /* 64px */
  --text-display: 5rem;     /* 80px */

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2.0;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.12em;

  /* ── Spacing ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Radii ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Borders ────────────────────────────────────── */
  --border-thin:   1px solid var(--color-border);
  --border-light:  1px solid var(--color-border-light);
  --border-accent: 2px solid var(--color-accent);

  /* ── Shadows ────────────────────────────────────── */
  --shadow-card:       0 2px 12px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-panel:      0 16px 48px rgba(0,0,0,0.7);
  --shadow-btn:        0 2px 8px rgba(200,133,58,0.3);
  --shadow-btn-hover:  0 4px 16px rgba(200,133,58,0.45);

  /* ── Transitions ────────────────────────────────── */
  --transition-fast:   150ms ease-out;
  --transition-base:   250ms ease-out;
  --transition-slow:   400ms ease-out;
  --transition-drawer: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-mega:   200ms ease-out;

  /* ── Breakpoints (as reference — use @media directly) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}