/* ==========================================================================
   LIVIT · DESIGN TOKENS v1.1 · roles como alias de la paleta (gen_tokens.py)
   Generado 2026-08-11 · brandPrimary #E6007E
   Nombres de rol compatibles con Kore Studio DS v1.0
   ========================================================================== */

:root {
  /* ---- Primitivos · neutrales (OKLCH H=305, unifica producto y marca) ---- */
  --neutral-1000: #020103;
  --neutral-975: #060409;
  --neutral-950: #0D0A10;
  --neutral-925: #141118;
  --neutral-900: #1D1921;
  --neutral-850: #28242C;
  --neutral-800: #333037;
  --neutral-750: #3F3B43;
  --neutral-700: #4C4950;
  --neutral-600: #625F66;
  --neutral-500: #79767D;
  --neutral-400: #928F96;
  --neutral-300: #ACA9AF;
  --neutral-200: #C6C4C8;
  --neutral-150: #D8D6DA;
  --neutral-100: #E7E5E9;
  --neutral-50: #F3F2F5;
  --neutral-0: #FCFBFD;

  /* ---- Primitivos · marca (eje derivado de #E6007E) ---- */
  --brand-50: #FBF2F5;
  --brand-100: #FBD9E6;
  --brand-200: #F7B7D3;
  --brand-300: #F38BB7;
  --brand-400: #EF5A9A;
  --brand-500: #E6007E;
  --brand-600: #C10072;
  --brand-700: #8F1564;
  --brand-800: #5F1E4F;
  --brand-900: #3A1C37;
  --brand-950: #281526;
  --brand-990: #0D040D;

  /* ---- Acento oro · solo piezas de marca, nunca solo, siempre con magenta ---- */
  --gold: #EDC800;
  --gold-soft: #FFEDA7;

  /* ---- Primitivos · estado (success · warning · error · info) y oro extra.
          Escala propia para que los roles de estado también sean alias.
          Añadidos 5 sep 2026 por gen_tokens.py. ---- */
  --success-50: #F0FDF4;  --success-200: #BBF7D0;  --success-400: #4ADE80;  --success-500: #22C55E;  --success-700: #15803D;  --success-800: #1F5137;  --success-950: #0D2D1A;
  --warning-50: #FFFBEB;  --warning-100: #FEF3C7;  --warning-200: #FDE68A;  --warning-300: #FCD34D;  --warning-400: #FBBF24;  --warning-450: #FBAD0F;  --warning-500: #F59E0B;  --warning-700: #B45309;  --warning-750: #A86A00;  --warning-800: #7A4A18;  --warning-900: #422006;  --warning-925: #2D2005;  --warning-950: #2D1F05;
  --error-50: #FEF2F2;  --error-200: #FECACA;  --error-400: #F87171;  --error-500: #EF4444;  --error-600: #DC2626;  --error-700: #B91C1C;  --error-800: #6E2A2A;  --error-950: #2D0D0D;  --error-action: #DF3337;  --error-action-hover: #C42B2F;
  --info-50: #EFF6FF;  --info-400: #60A5FA;  --info-500: #3B82F6;  --info-700: #1D4ED8;  --info-950: #0A1929;
  --gold-600: #B39700;  --gold-700: #8A7400;

  /* ---- Tipologías de herramienta (29 sep 2026, Project Toolkit). Nueve paradas
          del haz en el orden en que madura el trabajo; sustituyen a las cuatro
          familias. No son paleta nueva: son el haz y un neutro. El tono de
          cada una lo derivan las primitivas ([data-tipo]) para cada tema.
          ORDEN INVERTIDO (7 oct 2026, Pedro): Análisis empieza en el gris y la
          escala baja por el haz —amarillo, naranja, coral, magenta— hasta Otros,
          en el ciruela. Así Comercial deja el amarillo (que en Kore se leía como
          aviso) y queda en el magenta oscuro. ---- */
  --tipo-analisis:        var(--neutral-500);
  --tipo-estrategia:      var(--beam-7);
  --tipo-posicionamiento: color-mix(in srgb, var(--beam-6) 45%, var(--beam-7));
  --tipo-diseno:          var(--beam-6);
  /* Culinaria (Pedro, 29 sep 2026): coral entre Diseño y Flujos, la mezcla de sus vecinas. */
  --tipo-culinaria:       color-mix(in srgb, var(--beam-5) 50%, var(--beam-6));
  --tipo-flujos:          var(--beam-5);
  --tipo-catalogo:        var(--beam-4);
  --tipo-comercial:       var(--beam-3);
  --tipo-otros:           var(--beam-2);

  /* ---- El haz. Degradado de marca, siete paradas. Tres de ellas
          (--beam-3, --beam-5, --beam-6) solo viven aqui: no son paleta. ---- */
  --beam-1: #281526;
  --beam-2: #5F1E4F;
  --beam-3: #AF0069;
  --beam-4: #E6007E;
  --beam-5: #F51C60;
  --beam-6: #FD6A21;
  --beam-7: #EDC800;

  /* ---- Degradados del sitio publico. Los usa livit-web-standalone y la
          previsualizacion del apartado «Livit web». Una sola definicion. ---- */
  --grad-plum-1: #2A0F24;  --grad-plum-2: #5C1146;  --grad-plum-3: #8F1560;
  --grad-plum-4: #120A14;  --grad-plum-5: #1A0E1C;  --grad-plum-6: #160C15;
  --grad-plum-7: #08050A;  --grad-plum-8: #6E3A54;
  --grad-plum-9: #5A3346;  --grad-plum-10:#2A2730; --grad-plum-11:#3A3540;
  --grad-plum-12:#8A5F74;  --grad-plum-13:#B07B96;
  --grad-blush-1: #F3A6CD; --grad-blush-2: #FDF1F6; --grad-blush-3: #FBE4EF;
  --grad-blush-4: #F8D5E7;
  --grad-warm-1: #7C5A34;  --grad-warm-2: #8F4A54;  --grad-warm-3: #A3106A;
  --grad-warm-4: #8A0F57;

  /* ---- Color de sintaxis de los bloques de codigo ---- */
  --code-str: #9FD8A8;  --code-com: #7E7A83;  --code-num: #F3C46B;

  /* ---- Marcas de terceros. NO son colores de Livit: se declaran aqui para
          que no anden sueltos, y no se usan para nada que no sea su logo. ---- */
  --vendor-claude: #D97757;      --vendor-claude-soft: #E8A98D;
  --vendor-claude-tag: #D9A28C;
  --vendor-figma-red: #F24E1E;   --vendor-figma-orange: #FF7262;
  --vendor-figma-purple: #A259FF;--vendor-figma-blue: #1ABCFE;
  --vendor-figma-green: #0ACF83; --vendor-figma-tag: #BE96FF;
  --vendor-figma-soft: #C6A2FF;

  /* ---- Espaciado ---- */
  --space0: 0;
  --space1: 1;
  --space2: 2;
  --space4: 4;
  --space6: 6;
  --space8: 8;
  --space10: 10;
  --space12: 12;
  --space16: 16;
  --space20: 20;
  --space24: 24;
  --space32: 32;
  --space40: 40;
  --space48: 48;
  --space64: 64;
  --space80: 80;
  --space96: 96;
  --space128: 128;

  /* ---- Radios ---- */
  --radius-none: 0;
  --radius-xs: 2;
  --radius-sm: 4;
  --radius-md: 6;
  --radius-lg: 8;
  --radius-xl: 12;
  --radius2xl: 16;
  --radius3xl: 24;
  --radius-full: 999;

  /* ---- Capas de estado ---- */
  --state-hover: 0.08;
  --state-focus: 0.12;
  --state-pressed: 0.12;
  --state-dragged: 0.16;
  --state-disabled-content: 0.38;
  --state-disabled-surface: 0.12;

  /* ---- Movimiento ---- */
  --motion-instant: 100ms cubic-bezier(0,0,0.2,1);
  --motion-fast: 200ms cubic-bezier(0,0,0.2,1);
  --motion-standard: 300ms cubic-bezier(0.2,0,0,1);
  --motion-slow: 450ms cubic-bezier(0.2,0,0,1);

  /* ---- Tipografía ---- */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;      /* interfaz: paneles, botones, tablas */
  --font-canvas: 'DM Sans', system-ui, sans-serif;               /* canvas central y piezas de cliente */
  --font-accent: 'Instrument Serif', Georgia, serif;             /* acento: cursiva, ≥24px, brandPrimary */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Modo oscuro (por defecto: el producto es dark-first) ----
   `.lv-canvas` y `.lv-slide` = EL DOCUMENTO (30 sep 2026, Pedro): una diapositiva,
   una página generada o el fondo sobre el que se leen van SIEMPRE en oscuro,
   que es como se maquetaron. No siguen el modo ni el idioma de Kore: estos
   roles se declaran en el propio elemento y ganan a lo que herede del <html>
   (el bloque claro de abajo y la piel que ToolFrame copia de Kore). */
:root, [data-theme="dark"], .lv-canvas, .lv-slide {
  --brand-primary: var(--brand-500); /* #E6007E */
  --brand-primary-tint: var(--brand-100); /* #FBD9E6 */
  --brand-primary-on: var(--neutral-0); /* #FCFBFD */
  --brand-primary-hover: var(--brand-600); /* #C10072 */
  --brand-primary-active: var(--brand-700); /* #8F1564 */
  --brand-primary-subtle: var(--brand-800); /* #5F1E4F */
  /* ---- LA ESCALERA DE SUPERFICIES (oscuro). Auditoría del 24 sep 2026:
          los cuatro niveles vivían en cinco puntos de claridad percibida —raíl
          1,3 · lienzo 3,1 · tarjeta 5,6— y los dos escalones que sostienen toda
          la jerarquía medían 1,8 y 2,5. Hacen falta unos 3 para que el ojo vea
          el borde entre dos campos grandes sin filete, así que la estructura la
          sostenía un hilo de 1 px y se perdía con luz ambiente o la pantalla
          escalada. Cada rol baja un paso de la MISMA paleta —ningún color
          nuevo, el ciruela no se toca— y los escalones pasan a 6,4 · 5,4 · 5,5.
          La tarjeta queda en L* 14,9, donde viven las de GitHub o Slack en
          oscuro: sigue siendo una aplicación oscura. (Pedro, 24 sep 2026) ---- */
  --bg-base: var(--neutral-950); /* #0D0A10 */
  /* El chrome —barra superior y raíl— deja de ser el mismo plano que el
     lienzo. Compartían bg-base y un filete de 1 px era lo único que decía
     dónde acaba la navegación y empieza el trabajo. Sube el CHROME y no el
     lienzo, a propósito: subir el lienzo se lo cobra a la tarjeta, que es la
     superficie que tiene que seguir despegada. En oscuro el raíl queda en
     L* 9,5, muy por debajo de la tarjeta (14,9): gana borde sin competir.
     (Pedro, 25 sep 2026) */
  --surface-chrome: var(--neutral-900); /* #1D1921 */
  --bg-default: var(--neutral-900); /* #1D1921 */
  --surface-default: var(--neutral-850); /* #28242C */
  --surface-raised: var(--neutral-800); /* #333037 */
  --surface-overlay: var(--neutral-800); /* #333037 */
  --surface-modal: var(--neutral-850); /* #28242C */
  --surface-selected: var(--brand-800); /* #5F1E4F */
  --text-primary: var(--neutral-100); /* #E7E5E9 · blanco «casi»: menos irradiación en oscuro (Pedro, 17 sep 2026) */
  --text-secondary: var(--neutral-150); /* #D8D6DA */
  --text-tertiary: var(--neutral-300); /* #ACA9AF */
  --text-muted: var(--neutral-400); /* #928F96 */
  --text-placeholder: var(--neutral-400); /* #928F96 */
  --text-disabled: var(--neutral-500); /* #79767D · sube un paso con las superficies (24 sep 2026) */
  --text-inverse: var(--neutral-925); /* #141118 */
  --text-on-accent: var(--neutral-0); /* #FCFBFD */
  --text-accent: var(--brand-300); /* #F38BB7 */
  --surface-inverse: var(--neutral-50); /* #F3F2F5 */
  --text-on-inverse: var(--neutral-925); /* #141118 */
  --border-subtle: var(--neutral-750); /* #3F3B43 */
  --border-default: var(--neutral-700); /* #4C4950 */
  --border-strong: var(--neutral-600); /* #625F66 */
  --border-accent: var(--brand-500); /* #E6007E */
  --border-focus: var(--brand-400); /* #EF5A9A */
  --border-primary: var(--neutral-0); /* #FCFBFD */
  --status-success: var(--success-500); /* #22C55E */
  --status-success-bg: var(--success-950); /* #0D2D1A */
  --status-success-text: var(--success-400); /* #4ADE80 */
  --status-error: var(--error-500); /* #EF4444 */
  --status-error-bg: var(--error-950); /* #2D0D0D */
  --status-error-text: var(--error-400); /* #F87171 */
  --status-error-hover: var(--error-600); /* #DC2626 */
  --status-error-action: var(--error-action); /* #DF3337 */
  --status-error-action-hover: var(--error-action-hover); /* #C42B2F */
  --status-warning: var(--warning-500); /* #F59E0B */
  --status-warning-bg: var(--warning-950); /* #2D1F05 */
  --status-warning-text: var(--warning-400); /* #FBBF24 */
  --status-info: var(--info-500); /* #3B82F6 */
  --status-info-bg: var(--info-950); /* #0A1929 */
  --status-info-text: var(--info-400); /* #60A5FA */
  --status-warning-border: var(--warning-800); /* #7A4A18 */
  --status-error-border: var(--error-800); /* #6E2A2A */
  --status-success-border: var(--success-800); /* #1F5137 */
  --status-unpublished: var(--warning-300); /* #FCD34D */
  --status-unpublished-bg: var(--warning-925); /* #2D2005 */
  --role-account-leader-bg: var(--brand-800); /* #5F1E4F */
  --role-editor-bg: var(--warning-900); /* #422006 */
  /* ---- Estados de trabajo y facturación (Management). Criterio Pedro, 17 sep 2026:
          idle N-500 · progress B-200 · delivered/invoiced B-500 · done success-500 · billable #FBAD0F.
          En claro, progress y delivered bajan a B-400 / B-700 y el texto billable a warning-750 (AA). ---- */
  --stage-idle: var(--neutral-500); /* #79767D */
  --stage-progress: var(--brand-200); /* #F7B7D3 */
  --stage-delivered: var(--brand-500); /* #E6007E */
  --stage-done: var(--success-500); /* #22C55E */
  --stage-billable: var(--warning-450); /* #FBAD0F */
  --stage-billable-text: var(--warning-450); /* #FBAD0F */
  /* Texto de las pastillas de etapa. Mismo reparto que --stage-billable-text,
     que ya existía: el color de la BARRA no sirve como TEXTO —magenta 500 sobre
     su propia pastilla da 3,66 y el verde 500 sobre claro, 2,3—. La barra sigue
     en --stage-*; la pastilla lee con estos. (Pedro, 24 sep 2026) */
  --stage-idle-text: var(--neutral-400); /* #928F96 */
  --stage-progress-text: var(--brand-200); /* #F7B7D3 */
  --stage-delivered-text: var(--brand-300); /* #F38BB7 */
  --stage-done-text: var(--success-400); /* #4ADE80 */
  --accent-gold: var(--gold); /* #EDC800 */
  --accent-gold-soft: var(--gold-soft); /* #FFEDA7 */

  /* ---- elevacion ----
     Escala unica de sombra. Antes habia 12 sombras escritas a mano, cuatro
     de ellas con rgba() cruda que el lint no puede ver. Regla: card en
     reposo, lift en hover, modal en capa flotante, page en hoja de
     documento, accent solo para el halo de marca. */
  --shadow-card: 0 2px 6px -2px color-mix(in srgb,var(--neutral-1000) 34%,transparent), 0 10px 28px -14px color-mix(in srgb,var(--neutral-1000) 40%,transparent);
  --shadow-lift: 0 4px 10px -4px color-mix(in srgb,var(--neutral-1000) 38%,transparent), 0 20px 50px -20px color-mix(in srgb,var(--neutral-1000) 52%,transparent);
  --shadow-modal: 0 24px 64px -28px color-mix(in srgb,var(--neutral-1000) 62%,transparent);
  --shadow-page: 0 24px 70px -28px color-mix(in srgb,var(--neutral-1000) 88%,transparent);
  --shadow-accent: 0 20px 46px -20px color-mix(in srgb,var(--brand-primary) 45%,transparent);
}

/* ---- Modo claro ---- */
[data-theme="light"] {
  --brand-primary: var(--brand-500); /* #E6007E */
  --brand-primary-tint: var(--brand-50); /* #FBF2F5 */
  --brand-primary-on: var(--neutral-0); /* #FCFBFD */
  --brand-primary-hover: var(--brand-600); /* #C10072 */
  --brand-primary-active: var(--brand-700); /* #8F1564 */
  --brand-primary-subtle: var(--brand-50); /* #FBF2F5 */
  /* ---- LA ESCALERA DE SUPERFICIES (claro). El defecto aquí no era el mismo
          que en oscuro: no estaba aplastada, estaba DESORDENADA. La página iba a
          L* 95,6 y la tarjeta a 98,7 —3,1, justo en el umbral—, pero además
          surface-raised valía #E7E5E9, más oscuro que la tarjeta y que la propia
          página: «elevado» significaba más claro en oscuro y más oscuro en
          claro. Y border-subtle valía ese mismo #E7E5E9 que bg-default, así que
          el filete de una tarjeta era el color del lienzo y desaparecía según
          dónde cayera.
          Ahora: página 91,2 · tarjeta y elevado 98,7 · filete 85,9. En claro lo
          elevado no puede ser más claro que el blanco, así que la elevación la
          lleva la sombra, que para eso está. (Pedro, 25 sep 2026) ---- */
  --bg-base: var(--neutral-100); /* #E7E5E9 */
  --surface-chrome: var(--neutral-50); /* #F3F2F5 · entre el lienzo (91,2) y la tarjeta (98,7) */
  --bg-default: var(--neutral-50); /* #F3F2F5 · el peldaño de las secciones, entre lienzo y tarjeta (25 sep 2026) */
  --surface-default: var(--neutral-0); /* #FCFBFD */
  --surface-raised: var(--neutral-0); /* #FCFBFD */
  --surface-overlay: var(--neutral-0); /* #FCFBFD */
  --surface-modal: var(--neutral-0); /* #FCFBFD */
  --surface-selected: var(--brand-50); /* #FBF2F5 */
  --text-primary: var(--neutral-925); /* #141118 */
  --text-secondary: var(--neutral-750); /* #3F3B43 */
  --text-tertiary: var(--neutral-600); /* #625F66 */
  --text-muted: var(--neutral-600); /* #625F66 */
  --text-placeholder: var(--neutral-500); /* #79767D */
  --text-disabled: var(--neutral-400); /* #928F96 */
  --text-inverse: var(--neutral-0); /* #FCFBFD */
  --text-on-accent: var(--neutral-0); /* #FCFBFD */
  --text-accent: var(--brand-700); /* #8F1564 · el acento vive también sobre el tinte de marca (25 sep 2026) */
  --surface-inverse: var(--brand-950); /* #281526 */
  --text-on-inverse: var(--neutral-0); /* #FCFBFD */
  --border-subtle: var(--neutral-150); /* #D8D6DA */
  --border-default: var(--neutral-150); /* #D8D6DA */
  --border-strong: var(--neutral-300); /* #ACA9AF */
  --border-accent: var(--brand-500); /* #E6007E */
  --border-focus: var(--brand-500); /* #E6007E */
  --border-primary: var(--neutral-925); /* #141118 */
  --status-success: var(--success-500); /* #22C55E */
  --status-success-bg: var(--success-50); /* #F0FDF4 */
  --status-success-text: var(--success-700); /* #15803D */
  --status-error: var(--error-500); /* #EF4444 */
  --status-error-bg: var(--error-50); /* #FEF2F2 */
  --status-error-text: var(--error-700); /* #B91C1C */
  --status-error-hover: var(--error-600); /* #DC2626 */
  --status-error-action: var(--error-action); /* #DF3337 */
  --status-error-action-hover: var(--error-action-hover); /* #C42B2F */
  --status-warning: var(--warning-500); /* #F59E0B */
  --status-warning-bg: var(--warning-50); /* #FFFBEB */
  --status-warning-text: var(--warning-700); /* #B45309 */
  --status-info: var(--info-500); /* #3B82F6 */
  --status-info-bg: var(--info-50); /* #EFF6FF */
  --status-info-text: var(--info-700); /* #1D4ED8 */
  --status-warning-border: var(--warning-200); /* #FDE68A */
  --status-error-border: var(--error-200); /* #FECACA */
  --status-success-border: var(--success-200); /* #BBF7D0 */
  --status-unpublished: var(--warning-700); /* #B45309 */
  --status-unpublished-bg: var(--warning-50); /* #FFFBEB */
  --role-account-leader-bg: var(--brand-50); /* #FBF2F5 */
  --role-editor-bg: var(--warning-100); /* #FEF3C7 */
  --stage-idle: var(--neutral-500); /* #79767D */
  --stage-progress: var(--brand-400); /* #EF5A9A */
  --stage-delivered: var(--brand-700); /* #8F1564 */
  --stage-done: var(--success-500); /* #22C55E */
  --stage-billable: var(--warning-450); /* #FBAD0F */
  --stage-billable-text: var(--warning-750); /* #A86A00 */
  /* Texto de las pastillas de etapa. Mismo reparto que --stage-billable-text,
     que ya existía: el color de la BARRA no sirve como TEXTO —magenta 500 sobre
     su propia pastilla da 3,66 y el verde 500 sobre claro, 2,3—. La barra sigue
     en --stage-*; la pastilla lee con estos. (Pedro, 24 sep 2026) */
  --stage-idle-text: var(--neutral-600); /* #625F66 */
  --stage-progress-text: var(--brand-700); /* #8F1564 */
  --stage-delivered-text: var(--brand-700); /* #8F1564 */
  --stage-done-text: var(--success-700); /* #15803D */
  --accent-gold: var(--gold-700); /* #8A7400 */
  --accent-gold-soft: var(--gold-600); /* #B39700 */

  /* ---- elevacion ----
     Escala unica de sombra. Antes habia 12 sombras escritas a mano, cuatro
     de ellas con rgba() cruda que el lint no puede ver. Regla: card en
     reposo, lift en hover, modal en capa flotante, page en hoja de
     documento, accent solo para el halo de marca. */
  --shadow-card: 0 2px 6px -2px color-mix(in srgb,var(--neutral-800) 8%,transparent), 0 10px 28px -14px color-mix(in srgb,var(--neutral-800) 10%,transparent);
  --shadow-lift: 0 4px 10px -4px color-mix(in srgb,var(--neutral-800) 10%,transparent), 0 20px 50px -20px color-mix(in srgb,var(--neutral-800) 14%,transparent);
  --shadow-modal: 0 24px 64px -28px color-mix(in srgb,var(--neutral-800) 18%,transparent);
  --shadow-page: 0 24px 70px -28px color-mix(in srgb,var(--neutral-800) 22%,transparent);
  --shadow-accent: 0 20px 46px -20px color-mix(in srgb,var(--brand-primary) 45%,transparent);
}