/* Croody — Design System 2025 */
:root{
  /* Paleta corporativa */
  --gator-950:#041009; --gator-900:#082015; --gator-800:#103924; --gator-700:#1C5C37; --gator-600:#277947; --gator-500:#3C9E5D; --gator-400:#5BB97D; --gator-300:#80D3A0; --gator-200:#B4E5C6; --gator-100:#DDF6E8; --gator-50:#F0FBF5;
  --jungle-950:#050807; --jungle-900:#0B1311; --jungle-800:#141F1B; --jungle-700:#1E2C26; --jungle-600:#293833; --jungle-500:#374640; --jungle-400:#56655F; --jungle-300:#7A8883; --jungle-200:#A9B4B0; --jungle-100:#D3DAD7; --jungle-50:#EEF1EF;
  --sand-600:#C18F4A; --sand-500:#E0B771; --sand-400:#F3D398; --sand-300:#F8E1B7; --sand-200:#FBECD1; --sand-100:#FDF5E6;
  --crimson-deep:#7A1E2A; --crimson-base:#C44850; --crimson-primary:#E04F56; --crimson-soft:#E8777D; --crimson-light:#E8A5A9; --crimson-pale:#FFA7B5;
  --orchid-600:#975C9B; --orchid-500:#B079B5; --orchid-300:#D6A6DA;
  --teal-600:#1A8D7C; --teal-400:#2FC1AA; --lime-500:#D7E35A;
  --info-500:#31BFEA; --warn-500:#F5B454; --error-500:#F06565;

  /* Semantic accents */
  --accent-info: var(--teal-400);
  --accent-success: var(--gator-500);
  --accent-warning: var(--sand-500);
  --accent-danger: var(--error-500);
  --accent-purple: var(--orchid-500);

  /* Tipografía - Fuentes personalizadas con fallbacks mejorados */
  --font-sans: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Baloo 2", "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --text-xs:0.78rem; --text-sm:0.9rem; --text-base:1rem; --text-lg:1.15rem; --text-xl:1.33rem; --text-2xl:1.6rem; --text-3xl:2.1rem; --text-4xl:clamp(2.3rem,2vw+2rem,3.6rem);
  --line-height-tight:1.15; --line-height-base:1.55; --line-height-loose:1.75;

  /* Escalas espaciales (basadas en número áureo ~1.618) */
  --space-1:8px; --space-2:13px; --space-3:21px; --space-4:34px; --space-5:55px; --space-6:89px;
  --radius-1:6px; --radius-2:10px; --radius-3:16px; --radius-4:24px; --radius-full:9999px;
  --border-1:1px; --border-2:1.5px; --border-3:2px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.08);
  --shadow-sm:0 4px 12px rgba(20,30,20,.12);
  --shadow-md:0 10px 30px rgba(20,50,30,.16);
  --shadow-lg:0 25px 55px rgba(32,80,50,.25);
  --shadow:var(--shadow-md);
  --shadow-strong:var(--shadow-lg);
  --z-0:0; --z-1:1; --z-10:10; --z-100:100; --z-1000:1000; --z-10000:10000;

  /* Contenedores base */
  --container-pad:34px;
  --gutter:24px;
  --grid-cols:12;

  /* Layout */
  --header-height: 82px;
  --footer-height: 200px;
  --sidebar-width: 280px;

  color-scheme: light dark;
}

/* SOLUCIÓN FOUC: Separar :root de temas - Los temas SOLO aplican cuando data-theme está presente */
html[data-theme="dark"]{
  --bg:var(--jungle-950);
  --surface-1:var(--jungle-900);
  --surface-2:var(--jungle-800);
  --surface-3:var(--jungle-700);
  --fg:var(--jungle-50);
  --fg-muted:var(--jungle-200);
  --fg-tertiary:var(--jungle-300);

  /* Marca (inversión por luminancia) */
  --brand-strong:var(--gator-700);
  --brand-base:var(--gator-500);
  --brand-soft:var(--gator-300);

  --focus-ring:var(--orchid-500);
  --shadow-strong:0 21px 55px rgba(95,175,72,.25);
  --shadow:0 13px 34px rgba(95,175,72,.16);

  /* Texto sobre fondos de marca (botones primarios, badges sólidos) */
  --on-brand: var(--surface-1);
  --brand-dark: color-mix(in oklab, var(--brand-strong), black 20%);
}

/* Tema claro: invertir luminancia dentro de la misma paleta */
html[data-theme="light"]{
  --bg:var(--gator-50);
  --surface-1:var(--gator-100);
  --surface-2:var(--gator-200);
  --surface-3:var(--gator-300);
  --fg:var(--jungle-900);
  --fg-muted:var(--jungle-600);
  --fg-tertiary:var(--jungle-500);

  /* Marca invertida por escala (claros↔oscuros) */
  --brand-strong:var(--gator-300);
  --brand-base:var(--gator-500);
  --brand-soft:var(--gator-700);

  --focus-ring:var(--gator-500);
  --shadow-strong:0 21px 55px rgba(47,122,51,.20);
  --shadow:0 13px 34px rgba(47,122,51,.12);

  /* Texto sobre fondos de marca en light */
  --on-brand: var(--jungle-950);
  --brand-dark: color-mix(in oklab, var(--brand-strong), black 15%);
}

/* Overrides de marca por sección */
/* Buddy → rojo (crimson) */
html[data-theme="dark"][data-brand="crimson"]{
  --brand-strong:#7A1E2A; /* deep crimson */
  --brand-base:#E04F56;   /* primary crimson */
  --brand-soft:#FFA7B5;   /* soft crimson */
  --shadow-strong:0 21px 55px rgba(224,79,86,.25);
  --shadow:0 13px 34px rgba(224,79,86,.16);
  --focus-ring:#E04F56;
  --on-brand:#0C0A0B; /* texto oscuro sobre rojo en dark */
}
html[data-theme="light"][data-brand="crimson"]{
  --brand-strong:#FFA7B5;
  --brand-base:#E04F56;
  --brand-soft:#7A1E2A;
  --shadow-strong:0 21px 55px rgba(224,79,86,.20);
  --shadow:0 13px 34px rgba(224,79,86,.12);
  --focus-ring:#E04F56;
  --on-brand:#FFFFFF; /* texto blanco sobre rojo en light */
  /* Ajuste de superficies claras sin tinte verde */
  --bg:#FCF6F7;            /* fondo cálido rosado muy suave */
  --surface-1:#F7ECEF;     /* tarjetas base */
  --surface-2:#F1E2E6;     /* niveles elevados */
  --surface-3:#E8D6DC;     /* nivel superior */
  --fg:#201416;            /* texto principal */
  --fg-muted:#5A3A3F;
  --fg-tertiary:#7A5A5F;
}

/* Luks → dorado (gold) */
html[data-theme="dark"][data-brand="gold"]{
  --brand-strong:#8A5A00; /* deep gold */
  --brand-base:#FFC157;   /* main gold */
  --brand-soft:#FFE6A8;   /* soft gold */
  --shadow-strong:0 21px 55px rgba(255,193,87,.25);
  --shadow:0 13px 34px rgba(255,193,87,.16);
  --focus-ring:#FFC157;
  --on-brand:#0C0A00; /* texto oscuro sobre dorado en dark */
}
html[data-theme="light"][data-brand="gold"]{
  --brand-strong:#FFE6A8;
  --brand-base:#FFC157;
  --brand-soft:#8A5A00;
  --shadow-strong:0 21px 55px rgba(255,193,87,.20);
  --shadow:0 13px 34px rgba(255,193,87,.12);
  --focus-ring:#FFC157;
  --on-brand:#2A1E00; /* texto oscuro sobre dorado en light */
  /* Ajuste de superficies claras sin tinte verde */
  --bg:#FFFBF2;            /* fondo crema cálido */
  --surface-1:#FFF4DE;     /* tarjetas base */
  --surface-2:#FFECC6;     /* niveles elevados */
  --surface-3:#FFE4AE;     /* nivel superior */
  --fg:#2A1E00;            /* texto principal */
  --fg-muted:#5C4720;
  --fg-tertiary:#7A6438;
}

/* Breakpoints y contenedores */
@media (min-width:1024px){:root{ --container-pad:55px; --gutter:34px; --grid-cols:13; }}
@media (min-width:768px) and (max-width:1023.98px){:root{ --container-pad:34px; --gutter:21px; --grid-cols:8; }}
@media (max-width:767.98px){:root{ --container-pad:21px; --gutter:13px; --grid-cols:5; }}

/* ============================================
   SEMANTIC ALIASES
   Variables semanticas para uso consistente
   ============================================ */

:root {
  /* Background semantic tokens */
  --bg-base: var(--bg, var(--jungle-950));
  --bg-elevated: var(--surface-1, var(--jungle-900));
  --bg-hover: var(--surface-2, var(--jungle-800));

  /* Text semantic tokens */
  --text-primary: var(--fg, var(--jungle-50));
  --text-secondary: var(--fg-muted, var(--jungle-200));
  --text-muted: var(--jungle-400);
  --text-inverse: var(--on-brand, var(--jungle-950));

  /* Border semantic tokens */
  --border-subtle: color-mix(in oklab, var(--fg, var(--jungle-50)), transparent 85%);
  --border-1-color: var(--border-subtle);

  /* Radius aliases */
  --radius-sm: 4px;
  --radius-md: var(--radius-2);
  --radius-lg: var(--radius-3);
  --radius-xl: var(--radius-4);

  /* Font aliases */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Transition presets */
  --transition-fast: var(--duration-fast, 100ms) ease;
  --transition-base: var(--duration-base, 233ms) cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: var(--duration-slow, 377ms) cubic-bezier(0.4, 0, 0.2, 1);

  /* Duration tokens (if not defined) */
  --duration-fast: 100ms;
  --duration-base: 233ms;
  --duration-slow: 377ms;

  /* Focus ring */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-color: var(--focus-ring, var(--orchid-500));

  /* Half-space for badges/chips */
  --space-half-1: 4px;
}