/* ============================================================
   variables.css — Design tokens from brand palette
   ============================================================ */

:root {
  /* ── Brand Palette ── */
  --color-void:       #040616;   /* deepest background */
  --color-dark:       #141414;   /* section backgrounds */
  --color-ink:        #000000;   /* pure black */
  --color-charcoal:   #373E48;   /* card / panel surfaces */
  --color-graphite:   #404040;   /* borders, dividers */
  --color-steel:      #808080;   /* muted text */
  --color-silver:     #878787;   /* secondary text */
  --color-mist:       #A1A1B4;   /* body text on dark */
  --color-lavender:   #B9B7C9;   /* accent-light, tags */
  --color-ghost:      #F0F0F0;   /* headings, near-white */
  --color-blue:       #373E48;   /* headings, near-white */
  --color-white:      #ffffff;   /* headings, near-white */
  --color-green:      #31C950;   /* green */
  --color-hosta:      #348389;   /* hosta */
  --color-shearling:  #B19958;   /* shearling */
  --color-db:         #2E4D79;   /* db */


  /* ── Semantic Assignments (Light Theme) ── */
  --bg-base:          #ffffff;
  --bg-surface:       var(--color-ghost);
  --bg-card:          #ffffff;
  --bg-bh:            #E1F3F4;
  --bg-ghost:         #F0F0F0;
  --border:           #d8d8e0;
  --border-subtle:    rgba(55, 62, 72, 0.12);

  --text-primary:     var(--color-void);
  --text-secondary:   var(--color-charcoal);
  --text-muted:       var(--color-silver);
  --text-accent:      #373E48;

  /* Accent — dark ink on light background */
  --accent:           #373E48;
  --accent-glow:      rgba(55, 62, 72, 0.1);

  /* ── Typography ── */
  --font-display:     'Bebas Neue', sans-serif;
  --font-heading:     'Syne', sans-serif;
  --font-mono:        'DM Mono', monospace;
  --font-body:        'DM Mono', monospace;
  --font-roboto:      'Roboto', sans-serif;
  --font-inter:       'Inter', sans-serif;
  --font-saira:       'Saira', sans-serif;

  /* ── Spacing Scale ── */
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.5rem;    /* 8px  */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2.5rem;    /* 40px */
  --space-2xl:  4rem;      /* 64px */
  --space-3xl:  6rem;      /* 96px */
  --space-4xl:  8rem;      /* 128px */

  /* ── Layout ── */
  --container-max:    1280px;
  --container-pad:    clamp(1rem, 5vw, 3rem);

  /* ── Radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;

  /* ── Shadows ── */
  --shadow-card:   0 2px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--border-subtle);
  --shadow-glow:   0 0 40px var(--accent-glow);
}