/* ============================================================
   JOSEPH BERRY — DESIGN TOKENS
   Single source of truth. Import this before styles.css
   ============================================================ */

:root {

  /* ── COLOUR ── */
  --color-bg:            #000000;
  --color-surface:       #0a0a0a;
  --color-surface-2:     #111111;
  --color-border:        #1e1e1e;
  --color-white:         #ffffff;
  --color-white-dim:     rgba(255,255,255,0.15);
  --color-white-faint:   rgba(255,255,255,0.06);
  --color-muted:         #555555;
  --color-muted-light:   #888888;
  --color-accent:        #d6292a;
  --color-accent-hover:  #ff3333;
  --color-contact-1:     #f5f5f5;
  --color-contact-2:     #efefef;
  --color-contact-ink:   #000000;

  /* ── TYPOGRAPHY ── */
  --font-display:  'Monument Extended', 'Helvetica Neue', Helvetica, sans-serif;
  --font-ui:       'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Scale — desktop */
  --text-logo:     16px;
  --text-nav:      11px;
  --text-hero:     10vw;
  --text-menu:     clamp(48px, 7vw, 90px);
  --text-aside:    clamp(36px, 6vw, 80px);
  --text-bg:       350px;
  --text-loader:   clamp(28px, 4.5vw, 68px);
  --text-label:    11px;
  --text-sm:       10px;
  --text-body:     14px;
  --text-contact:  clamp(28px, 4vw, 52px);

  /* Weight */
  --weight-regular: 400;
  --weight-bold:    700;
  --weight-black:   900;

  /* Leading */
  --leading-tight:  88%;
  --leading-normal: 1.05;

  /* Tracking */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0.01em;
  --tracking-wide:     0.1em;
  --tracking-wider:    0.15em;

  /* ── SPACING ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   40px;
  --space-8:   60px;
  --space-9:   80px;
  --space-10:  120px;

  /* ── LAYOUT ── */
  --nav-h:             88px;      /* full nav height incl. padding */
  --nav-padding-top:   60px;
  --nav-padding-side:  5%;
  --footer-bottom:     40px;

  /* ── BORDER RADIUS ── */
  --radius-pill: 70px;
  --radius-sm:   4px;
  --radius-card: 6px;

  /* ── TRANSITIONS ── */
  --ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    0.2s;
  --dur-mid:     0.4s;
  --dur-slow:    0.7s;
  --dur-loader:  0.8s;

  /* ── Z-INDEX ── */
  --z-bg:       1;
  --z-content:  2;
  --z-scroll:   3;
  --z-footer:   950;
  --z-nav:      990;
  --z-aside:    991;
  --z-menu:     992;
  --z-cursor:   9998;
  --z-loader:   9999;

  /* ── IMAGE PANEL (desktop) ── */
  --img-panel-w:    320px;
  --img-panel-h:    500px;
  --img-float-w:    650px;
  --img-margin-top: -140px;

  /* ── CURSOR (desktop) ── */
  --cursor-dot:        14px;
  --cursor-ring:       42px;
  --cursor-dot-hover:  20px;
  --cursor-ring-hover: 60px;

  /* ── PROGRESS BAR ── */
  --progress-w:     70px;
  --progress-h:     2px;
  --progress-track: #474747;

  /* ── SCROLL SVG ── */
  --scroll-svg-size: 120px;
}

/* ── Tablet (≤ 991px) ── */
@media (max-width: 991px) {
  :root {
    --nav-padding-top:  40px;
    --nav-h:            68px;
    --img-float-w:      480px;
    --img-margin-top:  -100px;
    --text-bg:          200px;
  }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {
  :root {
    --nav-h:             68px;
    --nav-padding-top:   28px;
    --nav-padding-side:  6%;
    --footer-bottom:     28px;

    --text-logo:         14px;
    --text-hero:         15vw;
    --text-menu:         clamp(36px, 11vw, 64px);
    --text-aside:        clamp(28px, 9vw, 52px);
    --text-bg:           120px;
    --text-loader:       clamp(16px, 5.5vw, 28px);
    --text-label:        10px;
    --text-contact:      clamp(22px, 7vw, 36px);

    --img-float-w:       100%;
    --img-margin-top:   -60px;

    --scroll-svg-size:   80px;

    --space-8:           32px;
    --space-9:           48px;
    --space-10:          64px;
  }
}

/* ── Small mobile (≤ 479px) ── */
@media (max-width: 479px) {
  :root {
    --text-hero:       18vw;
    --text-bg:         90px;
    --nav-padding-side: 5%;
  }
}