/* tokens.css — All CSS custom properties for Signature website
   Source: T3 Design System
   DO NOT add component styles here. :root only. */

:root {

  /* ── Colour ── */

  /* Primary */
  --color-ink:        #1E2B2F;
  --color-ink-mid:    #2E3F45;

  /* Gold System */
  --color-gold:       #B8860B;
  --color-gold-light: #D4A853;
  --color-gold-tint:  #F5E9C8;

  /* Text */
  --color-text-body:  #3D4F55;
  --color-text-mid:   #5A6B75;
  --color-text-light: #8A9BA3;

  /* Surfaces */
  --color-bg:         #FAF8F4;
  --color-surface:    #EDE9E1;
  --color-white:      #FFFFFF;

  /* Borders */
  --color-border:      #D8D2C8;
  --color-border-gold: #C4973F;

  /* Status */
  --color-success: #2D6A4F;
  --color-error:   #C62828;

  /* ── Typography ── */

  /* Families */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Scale — Desktop */
  --fs-h1:   3.5rem;
  --fs-h2:   2.5rem;
  --fs-h3:   1.75rem;
  --fs-h4:   1.125rem;
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  /* Scale — Mobile (applied via media query ≤768px) */
  --fs-h1-mob: 2.25rem;
  --fs-h2-mob: 1.75rem;
  --fs-h3-mob: 1.375rem;

  /* Line heights */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-sub:     1.3;
  --lh-body:    1.65;
  --lh-tight:   1.0;

  /* Letter spacing */
  --ls-wide:   0.08em;
  --ls-normal: 0;
  --ls-tight: -0.02em;

  /* ── Spacing ── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Section vertical padding */
  --section-py-desktop: 96px;
  --section-py-mobile:  64px;

  /* Container */
  --container-max: 1200px;
  --container-pad: 24px;

  /* ── Layout ── */

  /* Grid */
  --grid-cols-desktop: 12;
  --grid-cols-tablet:  8;
  --grid-cols-mobile:  4;
  --grid-gap:          24px;

  /* Breakpoints (reference only — use in @media directly) */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;

  /* Border radius — SHARP per design */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-btn:  2px;

  /* Shadows — FLAT */
  --shadow-none: none;
  --shadow-card: 0 1px 3px rgba(30,43,47,0.08);
  --shadow-nav:  0 1px 0 var(--color-border);

  /* Z-index */
  --z-base:    0;
  --z-card:    10;
  --z-nav:     100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;

  /* ── Motion ── */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}