/* ============================================================
   SPLĀN space — Design Tokens
   Derived from brandbook: Carbon / White / Fog / Silver / Teal Blue
   ============================================================ */

:root {
  /* ---- Core palette (brandbook) ---- */
  --carbon:   #0D0D0D;
  --white:    #FFFFFF;
  --fog:      #E7E7EA;
  --silver:   #CFCFD4;
  --teal:     #2D7CF6;

  /* ---- Accent gradient (matches logo glyph cyan→blue) ---- */
  --accent-from: #3B6EF6;
  --accent-to:   #4FD0E0;
  --accent-grad: linear-gradient(90deg, var(--accent-from) 0%, var(--accent-to) 100%);

  /* ---- Functional surfaces (light theme is primary) ---- */
  --bg:            #FBFBFC;   /* near-white, slightly warm-cool neutral */
  --bg-elevated:   #FFFFFF;
  --bg-inverse:    #0A0A0B;   /* deep carbon for the dark sections */
  --ink:           #0D0D0D;
  --ink-soft:      #4A4A52;
  --ink-faint:     #8A8A93;
  --line:          #E7E7EA;
  --line-strong:   #CFCFD4;

  /* ---- On dark surfaces ---- */
  --ink-on-dark:        #F4F4F6;
  --ink-on-dark-soft:   #9A9AA4;
  --line-on-dark:       rgba(255,255,255,0.10);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale (fluid, clamp-based) */
  --fs-mega:   clamp(3.4rem, 9vw, 9.5rem);
  --fs-h1:     clamp(2.6rem, 6vw, 5.5rem);
  --fs-h2:     clamp(2rem, 4vw, 3.4rem);
  --fs-h3:     clamp(1.4rem, 2.2vw, 1.9rem);
  --fs-lead:   clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.72rem;

  /* Weights */
  --w-light:  300;
  --w-reg:    400;
  --w-med:    500;
  --w-semi:   600;
  --w-bold:   700;

  /* Letter-spacing — the brand reads "engineered/spacious" */
  --ls-eyebrow: 0.28em;
  --ls-wide:    0.04em;
  --ls-tight:   -0.02em;
  --ls-mega:    -0.03em;

  /* ---- Spacing scale ---- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-28: 7rem;
  --s-40: 10rem;

  /* ---- Layout ---- */
  --maxw:        1320px;
  --maxw-narrow: 880px;
  --gutter:      clamp(1.25rem, 5vw, 5rem);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.35s;
  --dur-med:    0.7s;
  --dur-slow:   1.2s;

  /* ---- Misc ---- */
  --radius:     2px;
  --radius-lg:  6px;
  --shadow-soft: 0 1px 2px rgba(13,13,13,0.04), 0 12px 40px rgba(13,13,13,0.06);
}