/* =========================================================================================
   tokens.css: Centro de capacitacion PSMOBCORE
   Paleta y variables compartidas por index.html (hub), guia.html y, por herencia visual,
   entrenamiento.html y ejecucion.html (esas dos no se retocan en este piloto).
   Cada color viene de @radix-ui/colors 3.0.0 (comentado como escala + paso); las excepciones
   literales permitidas son #ffffff y #0c0c0e (ver plataforma/diseno/shell.py, comprobar_colores_radix).
   Mecanismo de tema: bare :root = claro; prefers-color-scheme + :root[data-theme] = oscuro.
   ========================================================================================= */

:root{
  /* ---------- fondos y superficies (claro) ---------- */
  --bg:#f9f9fb;            /* slate 2 */
  --surface:#ffffff;       /* blanco puro */
  --raised:#fcfcfd;        /* slate 1 */
  --sunken:#f0f0f3;        /* slate 3 */

  /* ---------- texto (claro) ---------- */
  --ink:#1c2024;           /* slate 12 */
  --muted:#60646c;         /* slate 11 */
  --faint:#8b8d98;         /* slate 9, sólo bordes y marcas decorativas, nunca texto legible */

  /* ---------- bordes (claro) ---------- */
  --line:#e0e1e6;          /* slate 5 */
  --line-strong:#cdced6;   /* slate 7 */

  /* ---------- acento (claro) ---------- */
  --accent:#6e56cf;        /* violet 9 */
  --accent-hover:#654dc4;  /* violet 10 */
  --accent-ink:#6550b9;    /* violet 11 */
  --accent-soft:#f4f0fe;   /* violet 3 */
  --accent-line:#c2b5f5;   /* violet 7 */
  --on-accent:#ffffff;     /* blanco puro */

  /* ---------- señal (claro) ---------- */
  --signal:#107d98;        /* cyan 11 */
  --signal-soft:#def7f9;   /* cyan 3 */

  /* ---------- semáforo de veredicto (claro) ---------- */
  --pass:#2a7e3b;          /* grass 11 */
  --pass-soft:#f5fbf5;     /* grass 2, corregido para AA sobre pass */
  --pass-line:#b2ddb5;     /* grass 6 */
  --fail:#d13415;          /* tomato 11 */
  --fail-soft:#fff8f7;     /* tomato 2, corregido para AA sobre fail */
  --fail-line:#fdbdaf;     /* tomato 6 */
  --warn:#ab6400;          /* amber 11 */
  --warn-soft:#fefbe9;     /* amber 2, corregido para AA sobre warn-strong */
  --warn-line:#f3d673;     /* amber 6 */
  --warn-strong:#4f3422;   /* amber 12, texto de la píldora "Inconcluso" */
  --info:#0d74ce;          /* blue 11 */
  --info-soft:#f4faff;     /* blue 2, corregido para AA sobre info */
  --info-line:#acd8fc;     /* blue 6 */
  --na:#60646c;            /* slate 11 */
  --na-soft:#f0f0f3;       /* slate 3 */
  --na-line:#d9d9e0;       /* slate 6 */

  /* ---------- etapas operativas B0 C1 C2 C3 B1: paso 9, no cambia con el tema ---------- */
  --e-B0:#ffc53d;          /* amber 9 */
  --e-C1:#00a2c7;          /* cyan 9 */
  --e-C2:#29a383;          /* jade 9 */
  --e-C3:#ab4aba;          /* plum 9 */
  --e-B1:#3e63dd;          /* indigo 9 */
  /* texto sobre el relleno de la etapa (cinta del taller), el que llega a AA sobre el paso 9:
     amber, cyan y jade piden texto oscuro; plum e indigo, blanco. No cambia con el tema. */
  --e-B0-on:#1c2024;       /* slate 12, 10.38 */
  --e-C1-on:#1c2024;       /* slate 12, 5.46 */
  --e-C2-on:#1c2024;       /* slate 12, 5.20 */
  --e-C3-on:#ffffff;       /* blanco, 4.75 */
  --e-B1-on:#ffffff;       /* blanco, 5.21 */

  /* etapas, claro: -soft paso 2, -line paso 6, -ink paso 11 (paso 12 donde 11 no llega a AA
     4.5 sobre -soft o sobre --surface: B0 amber y C2 jade, ver plataforma/diseno/shell.py
     comprobar_contraste_tokens). Únicas usadas como texto legible de una etapa (taller de
     ejecución, .et-*); fill/borde de etapa usan la base o -line, nunca -ink. */
  --e-B0-soft:#fefbe9; --e-B0-line:#f3d673; --e-B0-ink:#4f3422; /* amber 2, 6, 12 */
  --e-C1-soft:#f2fafb; --e-C1-line:#9ddde7; --e-C1-ink:#107d98; /* cyan 2, 6, 11 */
  --e-C2-soft:#f4fbf7; --e-C2-line:#acdec8; --e-C2-ink:#1d3b31; /* jade 2, 6, 12 */
  --e-C3-soft:#fdf7fd; --e-C3-line:#e9c2ec; --e-C3-ink:#953ea3; /* plum 2, 6, 11 */
  --e-B1-soft:#f7f9ff; --e-B1-line:#c1d0ff; --e-B1-ink:#3a5bc7; /* indigo 2, 6, 11 */

  /* ---------- rampa de fase f2..f9, paso 9, no cambia con el tema (barras de 3px, no texto) ---- */
  --f2:#6e56cf; /* violet 9 */ --f3:#0090ff; /* blue 9 */
  --f4:#12a594; /* teal 9 */   --f5:#46a758; /* grass 9 */
  --f6:#ffc53d; /* amber 9 */  --f7:#f76b15; /* orange 9 */
  --f8:#e54d2e; /* tomato 9 */ --f9:#5b5bd6; /* iris 9 */

  /* ---------- acento del entrenamiento (simulador ClickUp), no cambia con el tema ---------- */
  --cu:#5b5bd6;            /* iris 9, igual en irisDark 9 */

  --spot:rgba(110,86,207,.11); /* violet 9 en rgba, mancha del hover */
  --grid:rgba(28,32,36,.045);  /* slate 12 en rgba, rejilla decorativa */
  --shadow:0 1px 2px rgba(28,32,36,.05),0 10px 28px -14px rgba(28,32,36,.22);

  --r-sm:2px; --r:4px; --r-lg:6px;
  --alto-cabecera:65px;    /* header .top: min-height 64px de .wrap + 1px de borde inferior */

  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111113;           /* slate 1 */
    --surface:#18191b;      /* slate 2 */
    --raised:#212225;       /* slate 3 */
    --sunken:#0c0c0e;       /* negro casi puro, fuera de escala Radix (permitido) */

    --ink:#edeef0;          /* slate 12 */
    --muted:#b0b4ba;        /* slate 11 */
    --faint:#777b84;        /* slate 10 */

    --line:#2e3135;         /* slate 5 */
    --line-strong:#43484e;  /* slate 7 */

    --accent:#6e56cf;       /* violet 9 */
    --accent-hover:#7d66d9; /* violet 10 */
    --accent-ink:#baa7ff;   /* violet 11 */
    --accent-soft:#291f43;  /* violet 3 */
    --accent-line:#56468b;  /* violet 7 */
    --on-accent:#ffffff;    /* blanco puro */

    --signal:#4ccce6;       /* cyan 11 */
    --signal-soft:#082c36;  /* cyan 3 */

    --pass:#71d083;         /* grass 11 */
    --pass-soft:#1b2a1e;    /* grass 3 */
    --pass-line:#2d5736;    /* grass 6 */
    --fail:#ff977d;         /* tomato 11 */
    --fail-soft:#391714;    /* tomato 3 */
    --fail-line:#6e2920;    /* tomato 6 */
    --warn:#ffca16;         /* amber 11 */
    --warn-soft:#302008;    /* amber 3 */
    --warn-line:#5c3d05;    /* amber 6 */
    --warn-strong:#ffca16;  /* amber 11, texto de la píldora "Inconcluso" */
    --info:#70b8ff;         /* blue 11 */
    --info-soft:#0d2847;    /* blue 3 */
    --info-line:#104d87;    /* blue 6 */
    --na:#b0b4ba;           /* slate 11 */
    --na-soft:#212225;      /* slate 3 */
    --na-line:#363a3f;      /* slate 6 */

    /* etapas, oscuro: -soft paso 3, -line paso 6, -ink paso 11 (todas superan AA 4.5 en oscuro) */
    --e-B0-soft:#302008; --e-B0-line:#5c3d05; --e-B0-ink:#ffca16; /* amber 3, 6, 11 */
    --e-C1-soft:#082c36; --e-C1-line:#045468; --e-C1-ink:#4ccce6; /* cyan 3, 6, 11 */
    --e-C2-soft:#0f2e22; --e-C2-line:#1b5745; --e-C2-ink:#1fd8a4; /* jade 3, 6, 11 */
    --e-C3-soft:#351a35; --e-C3-line:#5e3061; --e-C3-ink:#e796f3; /* plum 3, 6, 11 */
    --e-B1-soft:#182449; --e-B1-line:#304384; --e-B1-ink:#9eb1ff; /* indigo 3, 6, 11 */

    --spot:rgba(186,167,255,.09); /* violet 11 en rgba, mancha del hover */
    --grid:rgba(237,238,240,.035); /* slate 12 en rgba, rejilla decorativa */
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 32px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --bg:#111113; --surface:#18191b; --raised:#212225; --sunken:#0c0c0e;
  --ink:#edeef0; --muted:#b0b4ba; --faint:#777b84;
  --line:#2e3135; --line-strong:#43484e;
  --accent:#6e56cf; --accent-hover:#7d66d9; --accent-ink:#baa7ff; --accent-soft:#291f43; --accent-line:#56468b; --on-accent:#ffffff;
  --signal:#4ccce6; --signal-soft:#082c36;
  --pass:#71d083; --pass-soft:#1b2a1e; --pass-line:#2d5736;
  --fail:#ff977d; --fail-soft:#391714; --fail-line:#6e2920;
  --warn:#ffca16; --warn-soft:#302008; --warn-line:#5c3d05; --warn-strong:#ffca16;
  --info:#70b8ff; --info-soft:#0d2847; --info-line:#104d87;
  --na:#b0b4ba; --na-soft:#212225; --na-line:#363a3f;
  --e-B0-soft:#302008; --e-B0-line:#5c3d05; --e-B0-ink:#ffca16;
  --e-C1-soft:#082c36; --e-C1-line:#045468; --e-C1-ink:#4ccce6;
  --e-C2-soft:#0f2e22; --e-C2-line:#1b5745; --e-C2-ink:#1fd8a4;
  --e-C3-soft:#351a35; --e-C3-line:#5e3061; --e-C3-ink:#e796f3;
  --e-B1-soft:#182449; --e-B1-line:#304384; --e-B1-ink:#9eb1ff;
  --spot:rgba(186,167,255,.09); --grid:rgba(237,238,240,.035);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 32px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}