/*
 * DESIGN TOKENS
 * ─────────────────────────────────────────────────────────────────────────────
 * This file is the single source of truth for all design values.
 * When connecting Figma: replace these values with your exported tokens.
 * Figma Tokens Plugin / Tokens Studio exports map directly to this structure.
 *
 * Structure:
 *   --ls-[category]-[variant]-[modifier]
 *   ls = lean-starter (your prefix — rename per project)
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ── COLOUR: Brand ─────────────────────────────────────── */
  --ls-color-primary-100:     #FBE9ED;
  --ls-color-primary-200:     #F4C3CE;
  --ls-color-primary-300:     #E68FA3;
  --ls-color-primary-400:     #D45874;
  --ls-color-primary-500:     #B81E3F;   /* Kreshendo red */
  --ls-color-primary-600:     #9C1835;
  --ls-color-primary-700:     #7E132A;
  --ls-color-primary-800:     #5F0E20;
  --ls-color-primary-900:     #3F0915;

  --ls-color-secondary-500:   #FF6B35;  /* Accent */
  --ls-color-secondary-600:   #D94E1A;

  /* ── COLOUR: Neutrals ──────────────────────────────────── */
  --ls-color-neutral-0:       #FFFFFF;
  --ls-color-neutral-50:      #F8F9FA;
  --ls-color-neutral-100:     #F1F3F5;
  --ls-color-neutral-200:     #E9ECEF;
  --ls-color-neutral-300:     #DEE2E6;
  --ls-color-neutral-400:     #CED4DA;
  --ls-color-neutral-500:     #ADB5BD;
  --ls-color-neutral-600:     #6C757D;
  --ls-color-neutral-700:     #495057;
  --ls-color-neutral-800:     #343A40;
  --ls-color-neutral-900:     #212529;
  --ls-color-neutral-1000:    #000000;
  --ls-color-ink:              #0A0B0B;   /* Near-black card/footer surface */

  /* ── COLOUR: Semantic ──────────────────────────────────── */
  --ls-color-success:         #2D9B51;
  --ls-color-warning:         #E8A020;
  --ls-color-error:           #D63031;
  --ls-color-info:            #0984E3;

  /* ── COLOUR: Surface & Text ────────────────────────────── */
  --ls-color-bg:              var(--ls-color-neutral-0);
  --ls-color-bg-alt:          var(--ls-color-neutral-50);
  --ls-color-bg-dark:         var(--ls-color-neutral-900);
  --ls-color-text:            var(--ls-color-neutral-900);
  --ls-color-text-muted:      var(--ls-color-neutral-600);
  --ls-color-text-inverse:    var(--ls-color-neutral-0);
  --ls-color-border:          var(--ls-color-neutral-200);
  --ls-color-border-dark:     var(--ls-color-neutral-400);

  /* ── TYPOGRAPHY: Families ──────────────────────────────── */
  /* Replace with your Figma font choices */
  --ls-font-heading:          'Michroma', 'Eurostile', system-ui, sans-serif;
  --ls-font-body:             'Barlow', system-ui, -apple-system, sans-serif;
  --ls-font-mono:             'JetBrains Mono', 'Courier New', monospace;

  /* ── TYPOGRAPHY: Scale (Major Third — 1.25 ratio) ──────── */
  --ls-text-xs:               0.64rem;    /* 10.24px */
  --ls-text-sm:               0.8rem;     /* 12.8px  */
  --ls-text-base:             1rem;       /* 16px    */
  --ls-text-md:               1.25rem;    /* 20px    */
  --ls-text-lg:               1.563rem;   /* 25px    */
  --ls-text-xl:               1.953rem;   /* 31.25px */
  --ls-text-2xl:              2.441rem;   /* 39px    */
  --ls-text-3xl:              3.052rem;   /* 48.8px  */
  --ls-text-4xl:              3.815rem;   /* 61px    */

  /* ── TYPOGRAPHY: Weights ───────────────────────────────── */
  --ls-font-weight-regular:   400;
  --ls-font-weight-medium:    500;
  --ls-font-weight-semibold:  600;
  --ls-font-weight-bold:      700;

  /* ── TYPOGRAPHY: Line Heights ──────────────────────────── */
  --ls-leading-tight:         1.2;
  --ls-leading-snug:          1.35;
  --ls-leading-normal:        1.5;
  --ls-leading-relaxed:       1.65;
  --ls-leading-loose:         1.8;

  /* ── TYPOGRAPHY: Letter Spacing ────────────────────────── */
  --ls-tracking-tight:        -0.02em;
  --ls-tracking-normal:        0;
  --ls-tracking-wide:          0.05em;
  --ls-tracking-wider:         0.1em;

  /* ── SPACING: 8px Base Grid ────────────────────────────── */
  --ls-space-1:               0.25rem;   /* 4px  */
  --ls-space-2:               0.5rem;    /* 8px  */
  --ls-space-3:               0.75rem;   /* 12px */
  --ls-space-4:               1rem;      /* 16px */
  --ls-space-5:               1.25rem;   /* 20px */
  --ls-space-6:               1.5rem;    /* 24px */
  --ls-space-8:               2rem;      /* 32px */
  --ls-space-10:              2.5rem;    /* 40px */
  --ls-space-12:              3rem;      /* 48px */
  --ls-space-16:              4rem;      /* 64px */
  --ls-space-20:              5rem;      /* 80px */
  --ls-space-24:              6rem;      /* 96px */
  --ls-space-32:              8rem;      /* 128px */

  /* ── LAYOUT ────────────────────────────────────────────── */
  --ls-container-sm:          640px;
  --ls-container-md:          768px;
  --ls-container-lg:          1024px;
  --ls-container-xl:          1280px;
  --ls-container-2xl:         1440px;
  --ls-container-max:         1536px;

  --ls-container-padding:     var(--ls-space-6);  /* Horizontal gutter */

  /* ── BORDERS ───────────────────────────────────────────── */
  --ls-radius-sm:             4px;
  --ls-radius-md:             8px;
  --ls-radius-lg:             12px;
  --ls-radius-xl:             16px;
  --ls-radius-2xl:            24px;
  --ls-radius-full:           9999px;

  --ls-border-width:          1px;
  --ls-border-width-md:       2px;

  /* ── SHADOWS ───────────────────────────────────────────── */
  --ls-shadow-sm:             0 1px 2px rgba(0,0,0,0.05);
  --ls-shadow-md:             0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --ls-shadow-lg:             0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --ls-shadow-xl:             0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --ls-shadow-inner:          inset 0 2px 4px 0 rgba(0,0,0,0.05);

  /* ── TRANSITIONS ───────────────────────────────────────── */
  --ls-transition-fast:       150ms ease;
  --ls-transition-base:       250ms ease;
  --ls-transition-slow:       400ms ease;

  /* ── Z-INDEX ───────────────────────────────────────────── */
  --ls-z-below:               -1;
  --ls-z-base:                 0;
  --ls-z-raised:               10;
  --ls-z-dropdown:             100;
  --ls-z-sticky:               200;
  --ls-z-overlay:              300;
  --ls-z-modal:                400;
  --ls-z-toast:                500;

}

/* ── Dark Mode ─────────────────────────────────────────── */
/* Dark mode disabled until intentionally designed.        */
/* To enable: uncomment and customise the block below.     */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --ls-color-bg:          var(--ls-color-neutral-900);
    --ls-color-bg-alt:      var(--ls-color-neutral-800);
    --ls-color-text:        var(--ls-color-neutral-100);
    --ls-color-text-muted:  var(--ls-color-neutral-400);
    --ls-color-border:      var(--ls-color-neutral-700);
  }
}
*/