/**
 * pegues.io Design System — Design Tokens
 * Central CSS custom properties shared across all pegues.io family sites.
 *
 * Usage: @import '/shared/css/tokens.css';
 * Version: 1.0.0
 */

:root {

  /* ─────────────────────────────────────────────
     COLORS
  ───────────────────────────────────────────── */

  /* Base backgrounds */
  --black:       #0a0a0a;
  --surface:     #111111;
  --surface-2:   #1a1a1a;
  --surface-3:   #222222;

  /* Brand */
  --gold:        #f8c100;
  --gold-dim:    #c99a00;
  --cream:       #FDE3A7;

  /* Text */
  --text-primary:   #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted:     #666666;

  /* Borders */
  --border:      #2a2a2a;

  /* Semantic aliases */
  --color-bg:            var(--black);
  --color-surface:       var(--surface);
  --color-surface-raised: var(--surface-2);
  --color-accent:        var(--gold);
  --color-accent-dim:    var(--gold-dim);
  --color-text:          var(--text-primary);
  --color-text-sub:      var(--text-secondary);
  --color-text-dim:      var(--text-muted);
  --color-border:        var(--border);


  /* ─────────────────────────────────────────────
     TYPOGRAPHY — Families
  ───────────────────────────────────────────── */

  --font-primary: 'NeueMontreal-Regular', 'Helvetica Neue', Arial, sans-serif;
  --font-medium:  'NeueMontreal-Medium',  'Helvetica Neue', Arial, sans-serif;
  --font-bold:    'NeueMontreal-Bold',    'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Sometype Mono', 'Courier New', Courier, monospace;


  /* ─────────────────────────────────────────────
     TYPOGRAPHY — Type Scale
  ───────────────────────────────────────────── */

  --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:  2rem;       /*  32px */
  --text-4xl:  2.75rem;    /*  44px */
  --text-5xl:  4rem;       /*  64px */
  --text-hero: clamp(3rem, 8vw, 7rem); /* responsive display */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.15em;


  /* ─────────────────────────────────────────────
     SPACING — 4px base grid
  ───────────────────────────────────────────── */

  --sp-1:  4px;    /*  4  */
  --sp-2:  8px;    /*  8  */
  --sp-3:  12px;   /* 12  */
  --sp-4:  16px;   /* 16  */
  --sp-5:  20px;   /* 20  */
  --sp-6:  24px;   /* 24  */
  --sp-8:  32px;   /* 32  */
  --sp-10: 40px;   /* 40  */
  --sp-12: 48px;   /* 48  */
  --sp-14: 56px;   /* 56  */
  --sp-16: 64px;   /* 64  */
  --sp-20: 80px;   /* 80  */
  --sp-24: 96px;   /* 96  */
  --sp-28: 112px;  /* 112 */
  --sp-32: 128px;  /* 128 */
  --sp-40: 160px;  /* 160 */


  /* ─────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;


  /* ─────────────────────────────────────────────
     TRANSITIONS & EASING
  ───────────────────────────────────────────── */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* Shorthand transitions */
  --transition-fast:   var(--duration-fast) var(--ease-default);
  --transition-base:   var(--duration-base) var(--ease-default);
  --transition-slow:   var(--duration-slow) var(--ease-default);


  /* ─────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4),
                 0 1px 2px rgba(0, 0, 0, 0.5);

  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.4),
                 0 2px 4px rgba(0, 0, 0, 0.5);

  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.5),
                 0 4px 6px rgba(0, 0, 0, 0.4);

  --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.55),
                 0 10px 10px rgba(0, 0, 0, 0.4);

  --shadow-gold: 0 0 20px rgba(248, 193, 0, 0.3);
  --shadow-gold-lg: 0 0 40px rgba(248, 193, 0, 0.25),
                    0 0 80px rgba(248, 193, 0, 0.1);

  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);


  /* ─────────────────────────────────────────────
     Z-INDEX SCALE
  ───────────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;
  --z-top:     9999;


  /* ─────────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────────── */

  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 800px;

  --grid-cols: 12;
  --grid-gap:  var(--sp-6);

  --nav-height: 64px;
  --nav-height-scrolled: 56px;


  /* ─────────────────────────────────────────────
     BREAKPOINTS (reference only — use in @media)
     sm: 640px | md: 768px | lg: 1024px | xl: 1280px
  ───────────────────────────────────────────── */

}