/* ============================================================
   FLUJOGYM — Design Tokens
   Base tokens (theme-independent). Color presets in theme-presets.css
   ============================================================ */

:root {
  /* ── Theme color family (overridden by [data-theme="..."]) ── */
  --clr-primary:        #F97316;
  --clr-primary-hover:  #EA6C0A;
  --clr-primary-dark:   #C2570A;
  --clr-primary-light:  #FB923C;
  --clr-primary-subtle: #FFF7ED;
  --clr-primary-glow:   rgba(249,115,22,.20);
  --clr-primary-rgb:    249, 115, 22;

  /* ── Neutrals (light base) ─────────────────────────────── */
  --clr-bg:        #FBFBFD;
  --clr-bg-soft:   #F5F6FA;
  --clr-surface:   #FFFFFF;
  --clr-surface-2: #F4F4F8;
  --clr-border:    #E4E4EC;
  --clr-border-s:  #D1D1DA;
  --clr-white:     #FFFFFF;

  /* ── Text ─────────────────────────────────────────────── */
  --clr-text-1:   #0B0B12;   /* headings */
  --clr-text-2:   #4B4B58;   /* body */
  --clr-text-3:   #8B8B98;   /* muted */
  --clr-text-inv: #FFFFFF;

  /* ── Dark accents (still useful for hero placeholder, simulator chrome) ── */
  --clr-dark:       #0A0A0A;
  --clr-dark-s:     #141414;
  --clr-dark-s2:    #1C1C1E;

  /* ── Semantic ─────────────────────────────────────────── */
  --clr-success: #22C55E;
  --clr-error:   #EF4444;
  --clr-warning: #F59E0B;
  --clr-info:    #3B82F6;

  /* ── Theme gradients (built from primary + neutrals) ─── */
  --grad-bg-hero:
    radial-gradient(1200px 600px at 80% -10%, var(--clr-primary-glow), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(var(--clr-primary-rgb), .10), transparent 55%),
    var(--clr-bg);

  --grad-bg-soft:
    radial-gradient(800px 400px at 50% 0%, rgba(var(--clr-primary-rgb), .08), transparent 60%),
    var(--clr-bg);

  /* ── Page base background (fixed, brand-orange — independent of demo theme) ──
     El degradado se arma con 3 tonos: primario (naranja), secundario
     (salmón) y acento (durazno). El blanco domina vía la capa base lineal;
     para más/menos naranja ajusta los alfas de cada radial (--grad-page-a*)
     o calienta/enfría la base (--grad-page-base-*). */
  --grad-page-primary:   249, 115, 22;   /* naranja  */
  --grad-page-secondary: 251, 146, 60;   /* salmón   */
  --grad-page-accent:    253, 186, 116;  /* durazno  */

  --grad-page-a1: .24;   /* intensidad del primario  (arriba-derecha) */
  --grad-page-a2: .18;   /* intensidad del secundario (izquierda)     */
  --grad-page-a3: .16;   /* intensidad del acento     (abajo-centro)  */

  /* Base lineal: el blanco que debe dominar. El tope es un crema cálido
     y baja a blanco puro. */
  --grad-page-base-top: #FFEFDD;
  --grad-page-base-mid: #FFF8F2;
  --grad-page-base-bot: #FFFFFF;

  --grad-page:
    radial-gradient(1100px 720px at 88% -8%,  rgba(var(--grad-page-primary),   var(--grad-page-a1)), transparent 58%),
    radial-gradient(950px 620px at -8% 8%,    rgba(var(--grad-page-secondary), var(--grad-page-a2)), transparent 54%),
    radial-gradient(820px 560px at 50% 116%,  rgba(var(--grad-page-accent),    var(--grad-page-a3)), transparent 56%),
    linear-gradient(180deg,
      var(--grad-page-base-top) 0%,
      var(--grad-page-base-mid) 48%,
      var(--grad-page-base-bot) 100%);

  --grad-divider-v:
    linear-gradient(180deg,
      transparent 0%,
      rgba(var(--clr-primary-rgb), .35) 25%,
      rgba(var(--clr-primary-rgb), .55) 50%,
      rgba(var(--clr-primary-rgb), .35) 75%,
      transparent 100%);

  --grad-primary:
    linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));

  /* ── Typography ───────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-py: clamp(4rem, 8vw, 7rem);

  /* ── Border radius ────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(11,11,18,.05);
  --shadow-sm: 0 1px 4px rgba(11,11,18,.06), 0 1px 2px rgba(11,11,18,.04);
  --shadow-md: 0 4px 16px rgba(11,11,18,.07), 0 2px 6px rgba(11,11,18,.04);
  --shadow-lg: 0 12px 40px rgba(11,11,18,.10), 0 4px 12px rgba(11,11,18,.05);
  --shadow-xl: 0 24px 64px rgba(11,11,18,.12), 0 8px 24px rgba(11,11,18,.06);
  --shadow-primary:    0 8px 32px rgba(var(--clr-primary-rgb), .30);
  --shadow-primary-lg: 0 16px 64px rgba(var(--clr-primary-rgb), .25);

  /* ── Transitions ──────────────────────────────────────── */
  --ease-fast:   150ms ease;
  --ease-normal: 250ms ease;
  --ease-slow:   400ms cubic-bezier(.4,0,.2,1);
  --ease-spring: 400ms cubic-bezier(.34,1.56,.64,1);

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:     0;
  --z-card:     10;
  --z-sim-bg:   20;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    2000;

  /* ── Container ────────────────────────────────────────── */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-px: clamp(1rem, 4vw, 2.5rem);

  /* ── Nav ──────────────────────────────────────────────── */
  --nav-h: 68px;
}

/* @property for animated conic-gradient (simulator border glow) */
@property --sim-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}