/* =====================================================================
   AK Community — Sistema de diseño · TOKENS
   Dirección A «Cuaderno de Taller» (+ piezas de B «Consola»)
   Ver /root/akcrm-tools/rediseno/DECISION.md

   Orden de capas (cascade layers). Lo declara este archivo, que se carga
   el primero; cualquier hoja posterior solo tiene que decir a qué capa va.
     vendor       CSS de Astra / Elementor / WooCommerce / plugins y el kit
                  global de Elementor (lo mete ahí includes/ak-diseno.php
                  para que nuestras capas ganen sin !important)
     tokens       variables (este archivo)
     base         elementos HTML sin clase
     elementor    CSS por página de Elementor (post-<id>.css): lo que se
                  ajusta en el editor gana a «base» pero no a los componentes
     componentes  botones, chips, tarjetas, cabecera, pie, páginas
     plugins      puente hacia Astra / Elementor / Woo / formularios
     temas        temas de temporada (solo sobrescriben tokens)
     utilidades   clases de una sola función (.ak-oculto, .ak-mono…)

   Cómo cambiar colores: edita SOLO los roles de este archivo (claro y
   oscuro). No uses hex en otras hojas: usa var(--rol).
   ===================================================================== */

@layer vendor, tokens, base, elementor, componentes, plugins, temas, utilidades;

/* ---------- Fuentes auto-alojadas (SIL Open Font License 1.1) ----------
   Subconjunto latin, woff2 variable. Archivos en assets/fonts/.          */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nunito-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {

  /* =================================================================
     1. Tokens que no dependen del modo
     ================================================================= */
  :root {
    /* Marca (fijos: logo, portadas, certificado) */
    --brand-navy: #003366;
    --brand-orange: #ff6600;
    --brand-ink: #0d2140;

    /* Tipografía */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;   /* SOLO H1/H2 cortos, citas, certificado */
    --font-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Escala fluida 360 → 1440 px (razón ~1,2 → ~1,333) */
    --step--2: clamp(0.75rem, 0.73rem + 0.10vw, 0.81rem);   /* mínimo 12 px: insignias y contadores */
    --step--1: clamp(0.85rem, 0.83rem + 0.12vw, 0.94rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.50rem);
    --step-2:  clamp(1.44rem, 1.29rem + 0.70vw, 2.00rem);
    --step-3:  clamp(1.73rem, 1.48rem + 1.20vw, 2.67rem);
    --step-4:  clamp(2.07rem, 1.66rem + 2.00vw, 3.55rem);
    --step-5:  clamp(2.40rem, 1.80rem + 3.00vw, 4.60rem);
    --leading-tight: 1.08;
    --leading-snug: 1.3;
    --leading-body: 1.65;
    --measure: 68ch;
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;
    --tracking-caps: .12em;

    /* Espaciado (base 4 px) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    --space-9: 96px; --space-10: 128px;
    --section-y: clamp(56px, 8vw, 112px);
    --container: 1200px;
    --container-narrow: 920px;
    --gutter: clamp(18px, 4vw, 40px);
    --header-h: 68px;

    /* Radios */
    --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;

    /* Movimiento */
    --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-in-out: cubic-bezier(.6, 0, .3, 1);

    /* Capas de apilado */
    --z-header: 50; --z-menu: 60; --z-flotante: 40; --z-modal: 100;

    /* Portada de curso: UNA variable por curso (se sobrescribe en línea) */
    --course-tint: var(--brand-navy);
    --on-course-tint: #ffffff;

    /* Decoración de temporada (la capa «temas» la rellena) */
    --season-stripe: none;
    --season-label: "";
  }

  /* =================================================================
     2. Roles de color · CLARO (por defecto y en cualquier sección con
        data-theme="light")
     ================================================================= */
  :root,
  [data-theme="light"] {
    color-scheme: light;

    --primary: #003366;          /* tinta: botón principal, enlaces fuertes */
    --primary-hover: #0a2747;
    --on-primary: #fffaf2;
    --primary-solid: #003366;    /* fondo sólido que admite texto BLANCO fijo (widgets antiguos) */
    --accent: #ff6600;           /* marcador: subrayados, puntos, insignias (no texto pequeño) */
    --accent-text: #b04500;      /* naranja apto para texto */
    --on-accent: #1f1206;
    --accent-soft: #ffe6d3;

    --learn: #e3efe6;            /* camino «Aprender» (gratis) */
    --learn-ink: #1d4a2e;
    --hire: #003366;             /* camino «Contratar» */
    --hire-ink: #fffaf2;

    --success: #24693f;  --success-bg: #e2f1e6;
    --warning: #8a4f00;  --warning-bg: #fbecd2;
    --danger:  #a8261b;  --danger-bg:  #fbe3df;
    --info:    #0b4f8a;  --info-bg:    #e1ecf7;

    --bg: #faf6ef;               /* papel */
    --bg-subtle: #f3ede2;
    --surface: #ffffff;
    --surface-2: #f5efe4;
    --surface-raised: #ffffff;
    --border: #e6dccb;
    --border-strong: #8d8170;
    --text: #1b2433;             /* tinta */
    --text-2: #464f5e;
    --text-muted: #6a6253;
    --link: #0b4f8a;
    --focus: #c25000;

    --progress-track: #e9e0d0;
    --progress-fill: #003366;
    --rule: #d9cdb8;             /* filetes editoriales */
    --dot: rgba(0, 51, 102, .10);
    --grid-line: rgba(0, 51, 102, .055);
    --overlay: rgba(17, 23, 32, .55);

    --shadow-1: 0 1px 2px rgba(27, 36, 51, .06), 0 1px 1px rgba(27, 36, 51, .04);
    --shadow-2: 0 6px 18px -6px rgba(27, 36, 51, .14), 0 2px 4px rgba(27, 36, 51, .05);
    --shadow-3: 0 22px 48px -18px rgba(27, 36, 51, .25);

    --logo-light: block;         /* qué logo se ve en este modo */
    --logo-dark: none;
  }

  /* =================================================================
     3. Roles de color · OSCURO («tinta de noche»). Se aplica a <html>
        o a CUALQUIER sección: <section data-theme="dark">.
     ================================================================= */
  [data-theme="dark"] {
    color-scheme: dark;

    --primary: #9cc3ee;
    --primary-hover: #bcd6f4;
    --on-primary: #0d1724;
    --primary-solid: #2f6fb3;    /* blanco sobre él 5:1 */
    --accent: #ff7a2b;
    --accent-text: #ff9a5c;
    --on-accent: #1f1206;
    --accent-soft: #3a2416;

    --learn: #1f3a2a;
    --learn-ink: #d6eedd;
    --hire: #1f3d66;
    --hire-ink: #f4eee4;

    --success: #74d39a;  --success-bg: #173225;
    --warning: #f0bb5e;  --warning-bg: #3a2a10;
    --danger:  #ff8f82;  --danger-bg:  #3d1b18;
    --info:    #9cc3ee;  --info-bg:    #15263a;

    --bg: #111720;
    --bg-subtle: #151c27;
    --surface: #18202c;
    --surface-2: #1f2836;
    --surface-raised: #222c3b;
    --border: #2c3747;
    --border-strong: #7d8899;
    --text: #f4eee4;
    --text-2: #cdc6ba;
    --text-muted: #a69e90;
    --link: #9cc3ee;
    --focus: #ff7a2b;

    --progress-track: #2a3443;
    --progress-fill: #9cc3ee;
    --rule: #313c4d;
    --dot: rgba(244, 238, 228, .07);
    --grid-line: rgba(244, 238, 228, .045);
    --overlay: rgba(0, 0, 0, .65);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 8px 22px -8px rgba(0, 0, 0, .55);
    --shadow-3: 0 24px 50px -18px rgba(0, 0, 0, .65);

    --logo-light: none;
    --logo-dark: block;
  }

  /* =================================================================
     4. Alias heredados (--ak-*). Los usan widgets HTML de Elementor,
        los shortcodes de exámenes y páginas antiguas. Apuntan a los
        roles nuevos: NO añadir alias nuevos, migrar a los roles.
     ================================================================= */
  :root,
  [data-theme] {
    /* Los widgets antiguos ponen texto blanco fijo sobre --ak-primary: fondo sólido apto */
    --ak-primary: var(--primary-solid);
    --ak-primary-hover: var(--primary-solid);
    --ak-secondary: var(--accent);
    --ak-accent: var(--accent);
    --ak-bg-dark: var(--bg);
    --ak-bg-panel: var(--surface);
    --ak-bg-panel-alt: var(--surface-2);
    --ak-bg-glass: var(--surface);
    --ak-bg-glass-light: var(--surface-2);
    --ak-text-primary: var(--text);
    --ak-text-secondary: var(--text-2);
    --ak-text-muted: var(--text-muted);
    --ak-text-disabled: var(--text-muted);
    --ak-border: var(--border);
    --ak-border-light: var(--border);
    --ak-border-strong: var(--border-strong);
    --ak-success: var(--success);
    --ak-error: var(--danger);
    --ak-danger: var(--danger);
    --ak-warning: var(--warning);
    --ak-bg: var(--bg);
    --ak-panel: var(--surface);
    --ak-panel-2: var(--surface-2);
    --ak-stroke: var(--border);
    --ak-text: var(--text);
    --ak-text-2: var(--text-2);
    --ak-blue: var(--primary-solid);
    --ak-blue-2: var(--primary-solid);
    --ak-radius-sm: var(--radius-sm);
    --ak-radius-md: var(--radius-md);
    --ak-radius-lg: var(--radius-lg);
    --ak-shadow-sm: var(--shadow-1);
    --ak-shadow-md: var(--shadow-2);
    --ak-shadow-lg: var(--shadow-3);
    --ak-shadow-xl: var(--shadow-3);
    --ak-shadow-xs: var(--shadow-1);
    --ak-shadow: var(--shadow-2);
    --ak-shadow-glow: var(--shadow-2);
    --ak-btn-shadow: var(--shadow-1);
    --ak-btn-shadow-hover: var(--shadow-2);
    --ak-radius: var(--radius-md);
    --ak-radius-xs: var(--radius-xs);
    --ak-radius-xl: var(--radius-lg);
    --ak-radius-full: var(--radius-pill);
    --ak-border-medium: var(--border-strong);
    --ak-border-glow: var(--primary);
    --ak-surface: var(--surface);
    --ak-surface-2: var(--surface-2);
    --ak-bg-2: var(--bg-subtle);
    --ak-primary-2: var(--primary-hover);
    /* Los «degradados» antiguos llevan texto blanco fijo: azul marino de marca en ambos modos */
    --ak-primary-gradient: linear-gradient(var(--brand-navy), var(--brand-navy));
    --ak-btn-gradient: linear-gradient(var(--brand-navy), var(--brand-navy));
    --ak-gradient-dark: linear-gradient(var(--bg), var(--bg));
    --ak-gradient-panel: linear-gradient(var(--surface), var(--surface));
    --ak-good: var(--success);
    --ak-bad: var(--danger);
    --ak-link: var(--link);
    --ak-ring: var(--focus);
    --ak-font: var(--font-text);
    --ak-alerta-texto: var(--warning);
    --ak-alerta-fondo: var(--warning-bg);
    --ak-alerta-borde: var(--warning);
    --ak-space-xs: var(--space-1);
    --ak-space-sm: var(--space-2);
    --ak-space-md: var(--space-4);
    --ak-space-lg: var(--space-5);
    --ak-space-xl: var(--space-6);
    --ak-space-2xl: var(--space-7);
    --ak-transition-fast: var(--dur-fast) var(--ease-out);
    --ak-transition-base: var(--dur-base) var(--ease-out);
    --ak-transition-smooth: var(--dur-base) var(--ease-in-out);
    --ak-transition-slow: var(--dur-slow) var(--ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  }
}