/*
  tokens.css — BAST · Olimpo v2
  Light luminoso material + espectro del prisma como sistema cromático.
*/

:root {

  /* ─── BASE ───────────────────────────────────────────── */
  --bg-base:        #FAFAF7;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #F2F2EE;
  --bg-inverse:     #14140F;

  /* ─── TEXTO ──────────────────────────────────────────── */
  --text-primary:   #14140F;
  --text-secondary: #5C5C56;
  --text-tertiary:  #9E9E97;
  --text-inverse:   #F0F0EC;

  /* ─── ESPECTRO DEL PRISMA ────────────────────────────── */
  --spectrum-red:    #E5484D;
  --spectrum-orange: #F76B15;
  --spectrum-yellow: #FFB224;
  --spectrum-green:  #30A46C;
  --spectrum-cyan:   #00B7C7;
  --spectrum-blue:   #3B5BDB;
  --spectrum-violet: #8E4EC6;

  --gradient-prism: linear-gradient(
    90deg,
    #E5484D, #F76B15, #FFB224, #30A46C,
    #00B7C7, #3B5BDB, #8E4EC6
  );

  /* ─── BORDES ─────────────────────────────────────────── */
  --border-default: rgba(20, 20, 15, 0.08);
  --border-strong:  rgba(20, 20, 15, 0.14);

  /* ─── TIPOGRAFÍA ─────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-hero:    clamp(2.75rem, 6vw, 5rem);
  --text-h1:      clamp(2rem, 4vw, 3rem);
  --text-h2:      clamp(1.375rem, 2.5vw, 1.875rem);
  --text-h3:      clamp(1.125rem, 2vw, 1.5rem);
  --text-body-lg: 1rem;
  --text-body:    0.9375rem;
  --text-small:   0.8125rem;
  --text-mono:    0.6875rem;
  --text-micro:   0.6rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─── MOTION ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast:  150ms;
  --t-mid:   250ms;
  --t-slow:  350ms;
  --t-xslow: 500ms;

  /* ─── SPACING (8pt grid) ─────────────────────────────── */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;

  /* ─── LAYOUT ─────────────────────────────────────────── */
  --max-width:     1200px;
  --content-width: 720px;
  --gutter:        clamp(1.25rem, 5vw, 3rem);

  /* ─── RADIUS ─────────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-full: 9999px;
}