/*
  JJS - Design Tokens
  tokens.css

  Tier 1  --jjs-*   Primitive values.  Never used directly in components.
  Tier 2  --*       Semantic tokens.   All components reference these only.

  Dark mode: uncomment [data-theme="dark"] block at bottom when
  reversed logo variants (white) are ready.
*/


/* ============================================================
   TIER 1 - PRIMITIVES
   ============================================================ */
:root {

  /* Brand gold */
  --jjs-gold-700: #7A6030;
  --jjs-gold-600: #8A6A3E;
  --jjs-gold-500: #AA8652;   /* canonical brand gold (eyedropped from logo) */
  --jjs-gold-400: #C4A26E;
  --jjs-gold-300: #D9BF96;
  --jjs-gold-100: #F7EFE1;

  /* Neutrals - dark */
  --jjs-neutral-950: #0D0D0F;
  --jjs-neutral-900: #1c1c1e;

  /* Neutrals - light */
  --jjs-neutral-100: #f4f1ed;   /* warm cream - testimonials bg */
  --jjs-neutral-50:  #faf8f5;   /* light cream - about bg */
  --jjs-neutral-0:   #ffffff;

  /* Card overlays */
  --jjs-card-dark:  rgba(26, 26, 26, 0.90);
  --jjs-card-gold:  rgba(170, 134, 82, 0.95);
}


/* ============================================================
   TIER 2 - SEMANTIC (light mode default)
   ============================================================ */
:root {

  /* Surfaces */
  --surface-page:        var(--jjs-neutral-0);
  --surface-about:       var(--jjs-neutral-50);
  --surface-testimonials: var(--jjs-neutral-100);
  --surface-footer:      var(--jjs-neutral-0);

  /* Text */
  --text-primary:        #000000;
  --text-body:           #000000;
  --text-testimonial:    #1c1c1e;
  --text-on-dark:        #ffffff;
  --text-on-gold:        #000000;

  /* Accent */
  --accent:              var(--jjs-gold-500);

  /* Typography */
  --font-serif: 'Ledger', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Font sizes - exact Figma values */
  --fs-display:     36px;
  --fs-contact-num: 24px;
  --fs-body-lg:     21px;
  --fs-body-md:     18px;
  --fs-body-sm:     15px;
  --fs-label:       14px;
  --fs-testimonial: 14px;
  --fs-nav:         16px;
  --fs-attribution: 12px;
  --fs-copyright:   10px;

  /* Letter spacing */
  --ls-label:       0.2em;
  --ls-btn:         0.1em;
  --ls-attribution: 0.08em;

  /* Layout - exact Figma measurements */
  --nav-h:          60px;
  --max-canvas:     1440px;
  --section-px:     168px;     /* standard horizontal padding */
  --section-py:     144px;     /* standard vertical padding */
  --testi-px:       144px;
  --testi-py:       174px;
  --col-main:       575px;
  --col-side:       320px;
  --col-gap:        209px;

  /* Buttons - exact Figma */
  --btn-w:  202px;
  --btn-h:   52px;
  --btn-r:    2px;

  /* Cards */
  --card-pad:   28px;
  --card-r-inv:  4px;          /* investigations card */
  --card-r-risk: 4px;          /* risk card */
  --card-r-test: 3px;          /* testimonial card */

  /* Transitions */
  --t-base:  0.2s ease;
  --t-slow:  0.4s ease;

  /* Entrance animation */
  --anim-duration:    1.2s;
  --anim-ease:        cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out-quint */
  --anim-distance:    28px;
  --anim-delay-step:  45ms;
}


/* ============================================================
   DARK MODE (uncomment when white logo variants are ready)
   ============================================================ */
/*
[data-theme="dark"] {
  --surface-page:         var(--jjs-neutral-900);
  --surface-about:        var(--jjs-neutral-900);
  --surface-testimonials: var(--jjs-neutral-900);
  --surface-footer:       var(--jjs-neutral-950);
  --text-primary:         #ffffff;
  --text-body:            #ffffff;
  --text-testimonial:     #e6e3de;
}
*/