/**
 * CONEXITY DESIGN SYSTEM — TOKENS
 * Version: 1.0.0  |  Branch: implementation/v1
 *
 * This file is the single source of truth for all design tokens.
 * All pages, components, and future frameworks must import this
 * file and reference only these variables — never hard-code values.
 *
 * Usage:
 *   <link rel="stylesheet" href="/design-system/tokens.css">
 *
 * -------------------------------------------------------------------
 * SECTION INDEX
 *   1. Color Primitives
 *   2. Surface Tokens   (dark / light / grey cadence)
 *   3. Text Tokens
 *   4. Border Tokens
 *   5. Accent / Brand Tokens
 *   6. Status Tokens
 *   7. Typography Scale
 *   8. Spacing Scale
 *   9. Radius & Shadow Tokens
 *  10. Layout Tokens
 *  11. Motion Tokens
 * -------------------------------------------------------------------
 */

:root {

  /* ─────────────────────────────────────────────────────────
     1. COLOR PRIMITIVES
     Raw values only — use Surface/Text tokens in components.
  ───────────────────────────────────────────────────────── */
  --c-black:      #000000;
  --c-grey-950:   #080808;
  --c-grey-900:   #0F0F0F;
  --c-grey-850:   #141414;
  --c-grey-800:   #1A1A1A;
  --c-grey-700:   #282828;
  --c-grey-600:   #3A3A3A;
  --c-grey-500:   #555555;
  --c-grey-400:   #777777;
  --c-grey-300:   #9A9A9A;
  --c-grey-200:   #CCCCCC;
  --c-grey-100:   #E8E8E8;
  --c-grey-50:    #F3F4F6;
  --c-grey-25:    #FAFAFA;
  --c-white:      #FFFFFF;

  --c-gold-900:   #7A4E00;
  --c-gold-700:   #B87A00;
  --c-gold-500:   #F6AC29;   /* brand orange */
  --c-gold-300:   rgba(246, 172, 41, 0.45);
  --c-gold-100:   rgba(246, 172, 41, 0.12);
  --c-gold-50:    rgba(246, 172, 41, 0.06);

  --c-green-500:  #2ECC71;
  --c-green-100:  rgba(46, 204, 113, 0.12);
  --c-red-500:    #E74C3C;
  --c-red-100:    rgba(231, 76, 60, 0.12);
  --c-blue-500:   #5AABFF;
  --c-blue-100:   rgba(90, 171, 255, 0.12);


  /* ─────────────────────────────────────────────────────────
     2. SURFACE TOKENS  (dark / light / grey cadence)
     Sections alternate: dark → light → grey → dark → ...
  ───────────────────────────────────────────────────────── */

  /* --- DARK surface (default, hero, tiers, region, perf) --- */
  --surface-dark:          var(--c-black);
  --surface-dark-elevated: var(--c-grey-950);
  --surface-dark-card:     var(--c-grey-900);
  --surface-dark-border:   var(--c-grey-800);
  --surface-dark-border-mid: var(--c-grey-700);

  /* --- LIGHT surface (pain+pivot, differentiator) --- */
  --surface-light:          var(--c-white);
  --surface-light-elevated: var(--c-grey-25);
  --surface-light-card:     var(--c-white);
  --surface-light-border:   var(--c-grey-100);
  --surface-light-border-mid: var(--c-grey-200);

  /* --- GREY surface (model, growth-modules) --- */
  --surface-grey:          var(--c-grey-50);
  --surface-grey-elevated: var(--c-white);
  --surface-grey-card:     var(--c-white);
  --surface-grey-border:   var(--c-grey-100);
  --surface-grey-border-mid: var(--c-grey-200);

  /* Runtime aliases (apply to <section> elements via surface class) */
  --bg-primary:   var(--surface-dark);
  --bg-surface:   var(--surface-dark-elevated);
  --bg-elevated:  var(--surface-dark-card);
  --border:       var(--surface-dark-border);
  --border-mid:   var(--surface-dark-border-mid);


  /* ─────────────────────────────────────────────────────────
     3. TEXT TOKENS
  ───────────────────────────────────────────────────────── */

  /* On dark surfaces */
  --text-primary:   var(--c-white);
  --text-secondary: var(--c-grey-300);
  --text-muted:     var(--c-grey-400);

  /* On light/grey surfaces */
  --text-on-light-primary:   #111111;
  --text-on-light-secondary: #444444;
  --text-on-light-muted:     #777777;

  /* Accents */
  --text-gold:    var(--c-gold-500);
  --text-success: var(--c-green-500);
  --text-error:   var(--c-red-500);
  --text-info:    var(--c-blue-500);


  /* ─────────────────────────────────────────────────────────
     4. BORDER TOKENS
  ───────────────────────────────────────────────────────── */
  --border-subtle:   var(--c-grey-800);
  --border-default:  var(--c-grey-700);
  --border-strong:   var(--c-grey-600);
  --border-gold:     var(--c-gold-300);
  --border-gold-dim: rgba(246, 172, 41, 0.28);


  /* ─────────────────────────────────────────────────────────
     5. ACCENT / BRAND TOKENS
  ───────────────────────────────────────────────────────── */
  --gold:        var(--c-gold-500);
  --gold-dim:    var(--c-gold-100);
  --gold-border: var(--c-gold-300);
  --gold-bg:     var(--c-gold-50);

  --success:     var(--c-green-500);
  --success-bg:  var(--c-green-100);
  --error:       var(--c-red-500);
  --error-bg:    var(--c-red-100);
  --info:        var(--c-blue-500);
  --info-bg:     var(--c-blue-100);


  /* ─────────────────────────────────────────────────────────
     6. STATUS CHIP TOKENS
     Used in pricing/allocation status chips.
  ───────────────────────────────────────────────────────── */
  --chip-available-bg:   rgba(46, 204, 113, 0.12);
  --chip-available-text: #2ECC71;
  --chip-available-border: rgba(46, 204, 113, 0.25);

  --chip-limited-bg:   rgba(246, 172, 41, 0.12);
  --chip-limited-text: var(--c-gold-500);
  --chip-limited-border: rgba(246, 172, 41, 0.28);

  --chip-full-bg:   rgba(231, 76, 60, 0.12);
  --chip-full-text: #E74C3C;
  --chip-full-border: rgba(231, 76, 60, 0.25);

  --chip-neutral-bg:   rgba(154, 154, 154, 0.10);
  --chip-neutral-text: var(--c-grey-300);
  --chip-neutral-border: rgba(154, 154, 154, 0.20);


  /* ─────────────────────────────────────────────────────────
     7. TYPOGRAPHY SCALE
  ───────────────────────────────────────────────────────── */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Display */
  --text-display-xl: clamp(40px, 6vw, 80px);  /* hero headline */
  --text-display:    clamp(36px, 5.5vw, 68px); /* h1 */
  --text-h2:         clamp(28px, 3.5vw, 46px); /* section headline */
  --text-h3:         clamp(18px, 2vw, 22px);   /* card headline */
  --text-h4:         11px;                     /* uppercase label */

  /* Body */
  --text-lead:   18px;
  --text-body:   16px;
  --text-small:  14px;
  --text-xs:     12px;
  --text-2xs:    10px;

  /* Letter spacing */
  --tracking-display: -0.035em;
  --tracking-h2:      -0.030em;
  --tracking-h3:      -0.020em;
  --tracking-label:    0.14em;
  --tracking-h4:       0.10em;
  --tracking-btn:     -0.01em;

  /* Line height */
  --leading-display:  1.08;
  --leading-h2:       1.12;
  --leading-h3:       1.30;
  --leading-body:     1.78;
  --leading-ui:       1.40;


  /* ─────────────────────────────────────────────────────────
     8. SPACING SCALE
     Base unit: 4px
  ───────────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30: 120px;

  /* Section vertical padding */
  --section-y:       var(--space-30);
  --section-y-tight: var(--space-20);

  /* Page horizontal padding */
  --pad-x: 40px;

  /* Card internal padding */
  --card-pad:       32px;
  --card-pad-sm:    24px;
  --card-pad-xs:    16px;


  /* ─────────────────────────────────────────────────────────
     9. RADIUS & SHADOW TOKENS
  ───────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* Shadows (dark-surface defaults) */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.60);
  --shadow-gold: 0 0 0 1px var(--gold-border), 0 4px 16px rgba(246,172,41,0.12);

  /* Shadows (light-surface) */
  --shadow-card-light: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);


  /* ─────────────────────────────────────────────────────────
     10. LAYOUT TOKENS
  ───────────────────────────────────────────────────────── */
  --container:      1200px;
  --container-sm:    800px;
  --container-xs:    640px;
  --header-h:         64px;
  --z-header:        200;
  --z-modal:         400;
  --z-overlay:       600;


  /* ─────────────────────────────────────────────────────────
     11. MOTION TOKENS
  ───────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --pad-x:     24px;
    --section-y: 72px;
    --card-pad:  24px;
  }
}