/* ==========================================================================
   tokens.css — Max Digital Services v2
   Discipline Claude (3 surfaces, 8/12/16, 96px) + brand Up Digital DNA
   ========================================================================== */

:root {
  /* ====================================================================
     PRIMITIVES — palette brute (touch with care)
     ==================================================================== */

  /* Brand */
  --p-ink:        #0a0a0f;   /* canvas base */
  --p-lime:       #bfff00;   /* accent signature */
  --p-lime-hi:    #d4ff4d;   /* accent hover */
  --p-cream:      #f5f5f0;   /* warm light (rare, accent inverse) */

  /* Greys (warm) */
  --p-white:      #ffffff;
  --p-grey-50:    #fafafa;
  --p-grey-200:   #e5e7eb;
  --p-grey-400:   #9ca3af;
  --p-grey-600:   #4b5563;
  --p-grey-900:   #111827;

  /* Surfaces (warm dark, 3 steps only) */
  --p-surface-1:  #0a0a0f;   /* canvas */
  --p-surface-2:  #15151f;   /* card */
  --p-surface-3:  #1f1f2a;   /* elevated / hover */

  /* Semantic (rare usage) */
  --p-success:    #10b981;
  --p-warn:       #f59e0b;
  --p-danger:     #ef4444;

  /* ====================================================================
     SEMANTIC — use these everywhere
     ==================================================================== */

  /* Surfaces — 3 only, by Claude discipline */
  --bg:               var(--p-surface-1);  /* canvas */
  --surface:          var(--p-surface-2);  /* cards, sections */
  --surface-elevated: var(--p-surface-3);  /* hover, focus, featured */

  /* Text */
  --fg:               var(--p-white);
  --fg-muted:         rgba(255, 255, 255, 0.65);
  --fg-subtle:        rgba(255, 255, 255, 0.45);
  --fg-faint:         rgba(255, 255, 255, 0.30);
  --fg-on-accent:     var(--p-ink);         /* text on lime */

  /* Accent (lime, used scarcely) */
  --accent:           var(--p-lime);
  --accent-hover:     var(--p-lime-hi);
  --accent-fg:        var(--p-ink);

  /* Borders (subtle on dark) */
  --border-subtle:    rgba(255, 255, 255, 0.06);
  --border-default:   rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.18);
  --border-accent:    var(--p-lime);

  /* ====================================================================
     TYPOGRAPHY — Fraunces (serif) + Space Grotesk (sans)
     ==================================================================== */

  --font-display: 'Fraunces', 'Tiempos Headline', Georgia, serif;
  --font-sans:    'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Hierarchy (Claude-style: weight 400 display, negative tracking) */
  --fs-display:  clamp(2.75rem, 5vw + 1rem, 4.5rem);   /* 44-72px */
  --fs-h1:       clamp(2.25rem, 3.5vw + 1rem, 3.5rem); /* 36-56px */
  --fs-h2:       clamp(1.75rem, 2vw + 1rem, 2.5rem);   /* 28-40px */
  --fs-h3:       clamp(1.25rem, 1vw + 1rem, 1.5rem);   /* 20-24px */
  --fs-h4:       1.125rem;                              /* 18px */
  --fs-body:     1.0625rem;                             /* 17px */
  --fs-body-sm:  0.9375rem;                             /* 15px */
  --fs-caption:  0.8125rem;                             /* 13px */
  --fs-eyebrow:  0.75rem;                               /* 12px */

  /* Line height */
  --lh-display:  1.05;
  --lh-heading:  1.2;
  --lh-body:     1.6;
  --lh-tight:    1.3;

  /* Tracking (Claude discipline: negative on display) */
  --tr-display:  -0.02em;
  --tr-heading:  -0.01em;
  --tr-body:     0;
  --tr-eyebrow:  0.06em;

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

  /* ====================================================================
     SPACING — 4px base, 8-step scale
     ==================================================================== */

  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-7:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */
  --space-9:   6rem;     /* 96px — section padding Claude */
  --space-10:  8rem;     /* 128px — major breaks */

  /* ====================================================================
     RADIUS — disciplined 3-tier hierarchy (Claude: 8/12/16)
     ==================================================================== */

  --radius-sm:   8px;   /* buttons, inputs, badges */
  --radius-md:   12px;  /* content cards, product cards */
  --radius-lg:   16px;  /* hero illustration, large components */
  --radius-pill: 9999px;

  /* ====================================================================
     ELEVATION — color-block first, shadow rare
     ==================================================================== */

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 32px rgba(191, 255, 0, 0.25);

  /* ====================================================================
     LAYOUT
     ==================================================================== */

  --container-max:    1200px;  /* Claude max width */
  --container-narrow: 800px;   /* editorial column */
  --container-prose:  65ch;    /* line length */
  --gutter:           1.5rem;

  --nav-height:       64px;    /* Claude nav */
  --section-pad:      var(--space-9);  /* 96px */
  --card-pad:         var(--space-6);  /* 32px */

  /* ====================================================================
     MOTION — restrained (default = M3 timings)
     ==================================================================== */

  --dur-instant:  100ms;
  --dur-fast:     150ms;   /* hover, press */
  --dur-base:     200ms;   /* state changes */
  --dur-slow:     300ms;   /* enter */
  --dur-slower:   500ms;   /* cross-screen */

  --ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph:    cubic-bezier(0.2, 0, 0, 1);

  /* ====================================================================
     Z-INDEX
     ==================================================================== */

  --z-base:       1;
  --z-elevated:   10;
  --z-nav:        50;
  --z-drawer:     60;
  --z-cookie:     80;
  --z-modal:      100;
}