/* ===========================================================================
   GIPFELTX — Working With Us
   tokens.css · Sistema de diseño: color, tipografía, espacio, movimiento
   Paleta base tomada de gipfeltx.com (naranja #f76336, llama #e7e02b,
   grises cálidos y blanco).
   =========================================================================== */

:root {
  /* ---- Marca ---------------------------------------------------------- */
  --brand-50:  #fff5f1;
  --brand-100: #ffe6dc;
  --brand-200: #ffc8b2;
  --brand-300: #ffa384;
  --brand-400: #fb7e55;
  --brand-500: #f76336;   /* naranja GIPFELTX */
  --brand-600: #e24a1d;
  --brand-700: #bc3814;
  --brand-800: #932d13;
  --brand-900: #752714;

  --flame-300: #f7f3a0;
  --flame-400: #f2ec5a;
  --flame-500: #e7e02b;   /* amarillo de la llama */
  --flame-600: #c2bb13;
  --flame-700: #938e10;

  /* ---- Neutros cálidos ------------------------------------------------ */
  --n-0:    #ffffff;
  --n-25:   #fcfbfa;
  --n-50:   #f7f6f4;
  --n-100:  #efedea;
  --n-200:  #e1ded9;
  --n-300:  #cac5bf;
  --n-400:  #a49e97;
  --n-500:  #7e786f;
  --n-600:  #5d5851;
  --n-700:  #433e39;
  --n-800:  #2b2824;
  --n-900:  #1c1a18;
  --n-950:  #161513;      /* negro cálido GIPFELTX */
  --n-1000: #0b0b0a;

  /* ---- Semánticos ----------------------------------------------------- */
  --ok-400:   #4ade80;
  --ok-500:   #22a45d;
  --ok-600:   #15803d;
  --warn-400: #fbbf4f;
  --warn-500: #e08c10;
  --warn-600: #b45309;
  --err-400:  #f87171;
  --err-500:  #dc2f2f;
  --err-600:  #b91c1c;
  --info-400: #60a5fa;
  --info-500: #2a74d4;
  --info-600: #1d4ed8;

  /* ---- Escala de niveles (1-4 + N/E) ---------------------------------- */
  --lvl-ne: var(--n-400);
  --lvl-1:  #8d8f96;
  --lvl-2:  #4a93c9;
  --lvl-3:  #f0a92c;
  --lvl-4:  var(--brand-500);

  /* ---- Tipografía ----------------------------------------------------- */
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --fs-2xs:  0.6875rem;   /* 11 */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 0.9375rem;   /* 15 */
  --fs-md:   1rem;        /* 16 */
  --fs-lg:   1.125rem;    /* 18 */
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-3xl:  clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.08em;

  /* ---- Espacio -------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.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;

  /* ---- Radios --------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-full: 999px;

  /* ---- Movimiento ----------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   420ms;
  --t-slower: 680ms;

  /* ---- Capas ---------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;
  --z-tip:     700;

  /* ---- Layout --------------------------------------------------------- */
  --wrap:      1200px;
  --wrap-wide: 1460px;
  --wrap-form: 860px;
  --header-h:  72px;
}

/* ===========================================================================
   TEMA CLARO (por defecto)
   =========================================================================== */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg:          var(--n-50);
  --bg-sunk:     var(--n-100);
  --bg-raised:   var(--n-0);
  --surface:     var(--n-0);
  --surface-2:   var(--n-25);
  --surface-3:   var(--n-100);

  --text:        var(--n-950);
  --text-soft:   var(--n-600);
  --text-mute:   var(--n-500);
  --text-faint:  var(--n-400);
  --text-invert: var(--n-0);

  --line:        var(--n-200);
  --line-soft:   var(--n-100);
  --line-strong: var(--n-300);

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-600);
  --accent-press:  var(--brand-700);
  --accent-soft:   var(--brand-50);
  --accent-text:   var(--brand-700);
  --on-accent:     #ffffff;

  /* Cristal */
  --glass-bg:      rgba(255, 255, 255, 0.72);
  --glass-bg-2:    rgba(255, 255, 255, 0.52);
  --glass-brd:     rgba(255, 255, 255, 0.85);
  --glass-brd-2:   rgba(22, 21, 19, 0.07);
  --glass-blur:    18px;
  --glass-sat:     1.6;
  --glass-hi:      rgba(255, 255, 255, 0.9);   /* brillo superior */

  /* Sombras */
  --sh-xs: 0 1px 2px rgba(22, 21, 19, 0.05);
  --sh-sm: 0 2px 6px rgba(22, 21, 19, 0.06), 0 1px 2px rgba(22, 21, 19, 0.04);
  --sh-md: 0 6px 18px rgba(22, 21, 19, 0.08), 0 2px 6px rgba(22, 21, 19, 0.04);
  --sh-lg: 0 18px 44px rgba(22, 21, 19, 0.11), 0 6px 14px rgba(22, 21, 19, 0.05);
  --sh-xl: 0 32px 70px rgba(22, 21, 19, 0.14), 0 10px 22px rgba(22, 21, 19, 0.06);
  --sh-accent: 0 10px 30px rgba(247, 99, 54, 0.28);
  --sh-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* Ambiente de fondo */
  --amb-1: rgba(247, 99, 54, 0.14);
  --amb-2: rgba(231, 224, 43, 0.11);
  --amb-3: rgba(22, 21, 19, 0.04);

  --ring: 0 0 0 3px rgba(247, 99, 54, 0.3);
  --scrim: rgba(22, 21, 19, 0.44);
}

/* ===========================================================================
   TEMA OSCURO
   =========================================================================== */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:          #0e0d0c;
  --bg-sunk:     #090908;
  --bg-raised:   #171614;
  --surface:     #1a1816;
  --surface-2:   #211f1c;
  --surface-3:   #2a2724;

  --text:        #f4f2ef;
  --text-soft:   #b8b2aa;
  --text-mute:   #8e8880;
  --text-faint:  #6a655e;
  --text-invert: var(--n-950);

  --line:        rgba(255, 255, 255, 0.1);
  --line-soft:   rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.17);

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-400);
  --accent-press:  var(--brand-600);
  --accent-soft:   rgba(247, 99, 54, 0.14);
  --accent-text:   var(--brand-300);
  --on-accent:     #1a0e08;

  --glass-bg:      rgba(32, 30, 27, 0.66);
  --glass-bg-2:    rgba(32, 30, 27, 0.4);
  --glass-brd:     rgba(255, 255, 255, 0.1);
  --glass-brd-2:   rgba(0, 0, 0, 0.5);
  --glass-blur:    20px;
  --glass-sat:     1.5;
  --glass-hi:      rgba(255, 255, 255, 0.07);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --sh-md: 0 8px 22px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --sh-lg: 0 20px 50px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.45);
  --sh-xl: 0 36px 80px rgba(0, 0, 0, 0.68), 0 12px 26px rgba(0, 0, 0, 0.5);
  --sh-accent: 0 12px 36px rgba(247, 99, 54, 0.34);
  --sh-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --amb-1: rgba(247, 99, 54, 0.2);
  --amb-2: rgba(231, 224, 43, 0.1);
  --amb-3: rgba(90, 170, 255, 0.07);

  --ring: 0 0 0 3px rgba(247, 99, 54, 0.4);
  --scrim: rgba(0, 0, 0, 0.66);

  --lvl-1: #9ea0a7;
  --lvl-2: #5aa8de;
  --lvl-3: #f5bb4d;
}

/* Sigue la preferencia del sistema mientras nadie elija tema a mano */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg:          #0e0d0c;
    --bg-sunk:     #090908;
    --bg-raised:   #171614;
    --surface:     #1a1816;
    --surface-2:   #211f1c;
    --surface-3:   #2a2724;

    --text:        #f4f2ef;
    --text-soft:   #b8b2aa;
    --text-mute:   #8e8880;
    --text-faint:  #6a655e;
    --text-invert: var(--n-950);

    --line:        rgba(255, 255, 255, 0.1);
    --line-soft:   rgba(255, 255, 255, 0.06);
    --line-strong: rgba(255, 255, 255, 0.17);

    --accent-hover:  var(--brand-400);
    --accent-press:  var(--brand-600);
    --accent-soft:   rgba(247, 99, 54, 0.14);
    --accent-text:   var(--brand-300);
    --on-accent:     #1a0e08;

    --glass-bg:      rgba(32, 30, 27, 0.66);
    --glass-bg-2:    rgba(32, 30, 27, 0.4);
    --glass-brd:     rgba(255, 255, 255, 0.1);
    --glass-brd-2:   rgba(0, 0, 0, 0.5);
    --glass-blur:    20px;
    --glass-sat:     1.5;
    --glass-hi:      rgba(255, 255, 255, 0.07);

    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --sh-md: 0 8px 22px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --sh-lg: 0 20px 50px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.45);
    --sh-xl: 0 36px 80px rgba(0, 0, 0, 0.68), 0 12px 26px rgba(0, 0, 0, 0.5);
    --sh-accent: 0 12px 36px rgba(247, 99, 54, 0.34);
    --sh-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --amb-1: rgba(247, 99, 54, 0.2);
    --amb-2: rgba(231, 224, 43, 0.1);
    --amb-3: rgba(90, 170, 255, 0.07);

    --ring: 0 0 0 3px rgba(247, 99, 54, 0.4);
    --scrim: rgba(0, 0, 0, 0.66);

    --lvl-1: #9ea0a7;
    --lvl-2: #5aa8de;
    --lvl-3: #f5bb4d;
  }
}