/* ============================================================
   TOKENS.CSS — Design Foundation
   nitishray.com / Proactive Nitish
   All design decisions live here. Nothing hardcoded elsewhere.
   ============================================================ */

:root {

  /* ── COLOUR ─────────────────────────────────────────────── */

  /* Base surfaces */
  --color-bg:           #F7F3EE;   /* warm oat — primary background   */
  --color-bg-subtle:    #EDE8DF;   /* slightly deeper — cards, panels  */
  --color-bg-dark:      #1E3A2F;   /* deep forest green — dark panels  */
  --color-bg-darkest:   #111110;   /* near black — footer              */

  /* Brand */
  --color-primary:      #1E3A2F;   /* deep forest green                */
  --color-primary-hover:#16301F;   /* darker on hover                  */
  --color-accent:       #B86B4A;   /* terracotta clay                  */
  --color-accent-hover: #C97A58;   /* lighter on hover                 */
  --color-sage:         #6B8F71;   /* muted green — supporting tone    */

  /* Text */
  --color-text:         #1C1917;   /* warm charcoal — body text        */
  --color-text-muted:   #78716C;   /* secondary text                   */
  --color-text-faint:   #A8A29E;   /* tertiary / disabled              */
  --color-text-inverse: #F7F3EE;   /* text on dark backgrounds         */

  /* Borders */
  --color-border:       #DDD8D0;   /* default border                   */
  --color-border-subtle:#E8E3DB;   /* very light dividers              */

  /* States */
  --color-focus:        #B86B4A;   /* focus ring                       */


  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Scale — fluid between 375px and 1280px viewport */
  --text-xs:    0.6875rem;   /*  11px */
  --text-sm:    0.8125rem;   /*  13px */
  --text-base:  0.9375rem;   /*  15px */
  --text-md:    1.0625rem;   /*  17px */
  --text-lg:    1.25rem;     /*  20px */
  --text-xl:    1.5rem;      /*  24px */
  --text-2xl:   2rem;        /*  32px */
  --text-3xl:   2.5rem;      /*  40px */
  --text-4xl:   3.25rem;     /*  52px */
  --text-5xl:   4rem;        /*  64px */

  /* Leading */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;

  /* Weight */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;


  /* ── SPACING ─────────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* Section vertical rhythm */
  --section-padding: var(--space-24);


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

  --max-width:       1120px;
  --max-width-text:   680px;
  --max-width-narrow: 520px;

  --gutter:     32px;   /* horizontal page padding */
  --gutter-sm:  20px;   /* mobile */

  --col-gap:    var(--space-16);
  --row-gap:    var(--space-12);


  /* ── SHAPE ───────────────────────────────────────────────── */

  --radius-sm:  3px;
  --radius:     5px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-full: 9999px;


  /* ── SHADOW ──────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md:  0 4px 16px rgba(28, 25, 23, 0.08), 0 2px 6px rgba(28, 25, 23, 0.04);
  --shadow-lg:  0 12px 40px rgba(28, 25, 23, 0.1),  0 4px 12px rgba(28, 25, 23, 0.06);
  --shadow-xl:  0 24px 64px rgba(28, 25, 23, 0.12), 0 8px 20px rgba(28, 25, 23, 0.06);


  /* ── MOTION ──────────────────────────────────────────────── */

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

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


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

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;

}


/* ── RESPONSIVE TOKEN OVERRIDES ───────────────────────────── */

@media (max-width: 768px) {
  :root {
    --gutter:          var(--gutter-sm);
    --section-padding: var(--space-16);
    --col-gap:         var(--space-10);
  }
}