/* ============================================================
   Fundedlog — Design Tokens · "SIGNAL" rebrand 2026-06
   Acento: Electric Blue #3478F6
   Dark:   Navy profundo · Light: Slate limpio
   ============================================================ */

:root {
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-serif: "Instrument Serif", "Times New Roman", serif;

  /* ESCALA EN REM, no en px (31/7). `almanac-responsive.css` ya subía el
     `font-size` de :root en pantallas de 1920 y 2560 para que la interfaz
     creciera con el monitor… pero con la escala en px eso no hacía nada: el
     píxel no escala con la raíz. Solo el 9% de los tamaños de la app (483 de
     5.084) estaba en unidades relativas, así que el auto-escalado existía
     pero no funcionaba.
     En rem (base 16px) los valores son EXACTAMENTE los mismos que antes a
     tamaño normal — 0.6875rem = 11px, 0.875rem = 14px, etc. — pero ahora
     crecen con la raíz. De regalo, la app respeta el tamaño de letra que el
     usuario tenga configurado en su navegador. */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px */
  --text-md:  0.875rem;   /* 14px */
  --text-base:0.9375rem;  /* 15px */
  --text-lg:  1.0625rem;  /* 17px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.375rem;   /* 38px */
  --text-5xl: 3.125rem;   /* 50px */
  --text-6xl: 4rem;       /* 64px */

  --r-xs: 5px; --r-sm: 7px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 56px; --s-16: 80px;

  /* ── Acento principal: Electric Blue ── */
  --blue-50:   #EEF4FF;
  --blue-100:  #D6E8FF;
  --blue-200:  #A8CCFF;
  --blue-300:  #6FA8FF;
  --blue-400:  #4C8EFF;
  --blue-500:  #3478F6;   /* PRIMARY */
  --blue-600:  #1F5FE0;
  --blue-700:  #1448B8;
  --blue-800:  #0D3290;

  /* ── Acento de marca: Gold (logo Fundedlog, 9/10/2026) ── */
  --gold-50:   #FAF6EE;
  --gold-100:  #F1E8D6;
  --gold-200:  #E3D2AE;
  --gold-300:  #D6BE91;
  --gold-400:  #C9AD7C;   /* PRIMARY dark theme */
  --gold-500:  #B89C6A;   /* logo */
  --gold-600:  #9C7F4C;
  --gold-700:  #806436;   /* PRIMARY light theme (AA on cream) */
  --gold-800:  #5E4826;
  --cream:     #ECE7DA;

  /* ── Ember: queda como color de gráfico / alerta ── */
  --ember-400: #F26D45;
  --ember-500: #E8552B;
  --ember-600: #C8401A;
  --ember-700: #9E3214;

  /* ── Semánticos ── */
  --green-500:  #2BAA6E;
  --green-600:  #1C7E50;
  --red-500:    #E03E5A;
  --red-600:    #B3273F;
  --amber-500:  #D69A2C;
  --violet-500: #7B5BD6;

  /* ── Fases (badges) ── */
  --phase-1:      #4C82D8;
  --phase-2:      #D69A2C;
  --phase-3:      #8164D6;
  --phase-funded: #2BAA6E;
  --phase-failed: #E03E5A;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 360ms;

  --num-feat: "tnum" 1, "ss01" 1, "cv01" 1;

  --fluid-title: clamp(32px, 1.6rem + 2.6vw, 66px);
  --fluid-kpi:   clamp(26px, 1.4rem + 1.1vw, 42px);
  --fluid-hero:  clamp(40px, 2rem + 4.4vw, 104px);
  --page-max: clamp(640px, 94vw, 1680px);
  --page-pad: clamp(16px, 1rem + 1.4vw, 40px);
  --rail-w: 56px; --topbar-h: 56px; --tabbar-h: 60px;
  --z-sticky: 40; --z-sheet: 60; --z-modal: 70;

  /* ── Legacy aliases ── */
  --text:           var(--ink);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-3);
  --text-soft:      var(--ink-3);
  --ink-1:          var(--ink);
  --ink-soft:       var(--ink-3);
  --bg-card:        var(--surface);
  --card-bg:        var(--surface);
  --surface-hover:  var(--bg-hover);
  --bg-2:           var(--bg-elev);
  --bg-3:           var(--bg-sunk);
  --bg-base:        var(--bg);
  --line:           var(--divider);
  --danger:         var(--neg);
  --easing-smooth:  var(--ease-out);
}

/* ───────────────────── LIGHT — "Cream Ledger" (9/10/2026) ───────────────────── */
[data-theme="light"] {
  --bg:            #F6F3EC;
  --bg-elev:       #FFFDF9;
  --bg-sunk:       #ECE7DA;
  --bg-hover:      #EFEADF;

  --surface:       #FFFDF9;
  --surface-2:     #F8F5EE;

  --border:        #E2DCCF;
  --border-strong: #CFC6B4;
  --divider:       #ECE6DA;
  --rule:          #DDD5C5;
  --grid-line:     rgba(60,48,28,.06);

  --ink:           #14161A;
  --ink-2:         #3D3A33;
  --ink-3:         #6B6559;
  --ink-4:         #9A9386;

  --accent:        var(--gold-700);
  --accent-hover:  var(--gold-800);
  --accent-fg:     #FFFFFF;
  --accent-soft:   var(--gold-100);
  --accent-soft-fg:var(--gold-800);
  --ring:          rgba(128,100,54,.32);

  --pos:           #1B9E60;
  --pos-soft:      #D8F5E8;
  --neg:           #D93B55;
  --neg-soft:      #FADDE3;
  --warn:          #A8551A;
  --warn-soft:     #FBE6D6;

  --chart-grid:    rgba(60,48,28,.07);
  --chart-axis:    #6B6559;
  --chart-1:       var(--gold-600);
  --chart-2:       #1B9E60;
  --chart-3:       #D93B55;
  --chart-4:       #4C82D8;
  --chart-5:       var(--ember-500);
  --chart-area-from: rgba(156,127,76,.18);
  --chart-area-to:   rgba(156,127,76,0);

  --shadow-sm: 0 1px 2px rgba(40,32,18,.06), 0 1px 1px rgba(40,32,18,.04);
  --shadow-md: 0 2px 4px rgba(40,32,18,.06), 0 10px 28px rgba(40,32,18,.08);
  --shadow-lg: 0 14px 42px rgba(40,32,18,.14);

  --overlay:   color-mix(in oklch, #14161a 42%, transparent);
  --skeleton:  linear-gradient(100deg, var(--bg-sunk) 30%, var(--surface-2) 50%, var(--bg-sunk) 70%);

  --glass-bg:        color-mix(in oklch, #fffdf9 76%, transparent);
  --glass-border:    rgba(60,48,28,.10);
  --glass-highlight: rgba(255,255,255,.7);
  --glass-elev:      color-mix(in oklch, #fffdf9 85%, transparent);
  --glass-sunk:      color-mix(in oklch, var(--bg-sunk) 72%, transparent);
  --glass-strong:    color-mix(in oklch, #fffdf9 92%, transparent);
}

/* ───────────────────── DARK — "Black Gold" (9/10/2026) ───────────────────── */
[data-theme="dark"] {
  --bg:            #0B0C0E;
  --bg-elev:       #111215;
  --bg-sunk:       #07080A;
  --bg-hover:      #17181C;

  --surface:       #131417;
  --surface-2:     #18191D;

  --border:        #24262B;
  --border-strong: #33363C;
  --divider:       #1B1D21;
  --rule:          #222429;
  --grid-line:     rgba(236,231,218,.04);

  --ink:           #ECE7DA;
  --ink-2:         #B3AC9E;
  --ink-3:         #857F73;
  --ink-4:         #57534B;

  --accent:        var(--gold-400);
  --accent-hover:  var(--gold-300);
  --accent-fg:     #14161A;
  --accent-soft:   rgba(201,173,124,.14);
  --accent-soft-fg:var(--gold-200);
  --ring:          rgba(201,173,124,.45);

  --pos:           #3DD68C;
  --pos-soft:      rgba(61,214,140,.14);
  --neg:           #F06080;
  --neg-soft:      rgba(240,96,128,.14);
  --warn:          #E8894A;
  --warn-soft:     rgba(232,137,74,.14);

  --chart-grid:    rgba(236,231,218,.06);
  --chart-axis:    #857F73;
  --chart-1:       var(--gold-400);
  --chart-2:       #3DD68C;
  --chart-3:       #F06080;
  --chart-4:       #6FA8FF;
  --chart-5:       var(--ember-400);
  --chart-area-from: rgba(201,173,124,.22);
  --chart-area-to:   rgba(201,173,124,0);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.6);
  --shadow-md: 0 2px 4px rgba(0,0,0,.6), 0 10px 28px rgba(0,0,0,.55);
  --shadow-lg: 0 16px 46px rgba(0,0,0,.75);

  --overlay:   color-mix(in oklch, #000 65%, transparent);
  --skeleton:  linear-gradient(100deg, var(--bg-sunk) 30%, var(--surface-2) 50%, var(--bg-sunk) 70%);

  --glass-bg:        color-mix(in oklch, #131417 66%, transparent);
  --glass-border:    rgba(236,231,218,.07);
  --glass-highlight: rgba(255,255,255,.04);
  --glass-elev:      color-mix(in oklch, #18191d 70%, transparent);
  --glass-sunk:      color-mix(in oklch, #07080a 62%, transparent);
  --glass-strong:    color-mix(in oklch, #131417 90%, transparent);
}

/* ── Depth tokens (cards, glow) ── */
html[data-theme="dark"] {
  --card-grad:      linear-gradient(180deg, var(--surface) 0%, #07080A 100%);
  --card-grad-feat: linear-gradient(165deg, rgba(201,173,124,.14), var(--surface) 46%);
  --shadow-hover:   0 14px 34px rgba(0,0,0,.65);
  --border-feat:    rgba(201,173,124,.38);
  --glow-ambient:   radial-gradient(900px 420px at 76% -6%, rgba(184,156,106,.10), transparent 68%),
                    radial-gradient(600px 300px at 6%  -4%, rgba(201,173,124,.06), transparent 66%);
}
html[data-theme="light"] {
  --card-grad:      linear-gradient(180deg, #FFFDF9 0%, #F8F5EE 100%);
  --card-grad-feat: linear-gradient(165deg, rgba(156,127,76,.08), #FFFDF9 52%);
  --shadow-hover:   0 14px 30px rgba(40,32,18,.10);
  --border-feat:    rgba(128,100,54,.30);
  --glow-ambient:   radial-gradient(900px 380px at 78% -8%, rgba(184,156,106,.07), transparent 70%);
}