/* ============================================================
   Arc — Design Tokens
   variables.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Colors ───────────────────────────────────────────── */
  --color-bg:              #FAFAF8;   /* Warm off-white background       */
  --color-surface:         #FFFFFF;   /* Card / surface white             */
  --color-surface-alt:     #F4F1EB;   /* Alternating section bg           */
  --color-border:          #E8E4DC;   /* Warm light border                */
  --color-text-primary:    #4A4743;   /* Medium-dark warm gray            */
  --color-text-secondary:  #6B6560;   /* Warm gray for body / captions    */
  --color-text-muted:      #9E9893;   /* Disabled / placeholder text      */
  --color-accent:          #E07B2A;   /* Amber / orange — primary accent  */
  --color-accent-light:    #FDF0E3;   /* Amber tint for card backgrounds  */
  --color-accent-dark:     #B8611A;   /* Hover state for accent           */
  --color-secondary:       #0D1F37;   /* Deep navy — secondary accent     */
  --color-secondary-light: #E3EBF8;   /* Navy tint for backgrounds        */
  --color-secondary-dark:  #071529;   /* Hover state for secondary        */
  --color-off-black:       #1A1916;   /* Warm off-black — footer bg       */

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Type scale (fluid-ish) */
  --text-xs:   0.75rem;     /*  12px */
  --text-sm:   0.875rem;    /*  14px */
  --text-base: 1rem;        /*  16px */
  --text-lg:   1.125rem;    /*  18px */
  --text-xl:   1.25rem;     /*  20px */
  --text-2xl:  1.5rem;      /*  24px */
  --text-3xl:  1.875rem;    /*  30px */
  --text-4xl:  2.25rem;     /*  36px */
  --text-5xl:  3rem;        /*  48px */
  --text-6xl:  3.75rem;     /*  60px */
  --text-7xl:  4.5rem;      /*  72px */

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;

  /* ── Spacing (8px base grid) ──────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:              1100px;
  --section-v-padding:      96px;
  --section-v-padding-mob:  64px;
  --nav-height:             72px;
  --gutter:                 var(--space-6);

  /* ── Border radius ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:     0 1px 2px rgba(26, 23, 20, 0.05);
  --shadow-sm:     0 1px 4px rgba(26, 23, 20, 0.07), 0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-md:     0 4px 16px rgba(26, 23, 20, 0.08), 0 2px 4px rgba(26, 23, 20, 0.04);
  --shadow-lg:     0 12px 32px rgba(26, 23, 20, 0.10), 0 4px 8px rgba(26, 23, 20, 0.05);
  --shadow-accent: 0 4px 24px rgba(224, 123, 42, 0.30);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast: 140ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index scale ────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
}

/* ── Mobile overrides ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-6xl: 2.75rem;
    --text-7xl: 3rem;
    --gutter:   var(--space-4);
  }
}