/* ============================================================

   Purple Hackers — Design Tokens v1.0.0

   Paleta P5 «Ultraviolet Dusk» · Tipografía B «Zürich»

   Fuente de verdad: tokens/tokens.json

   ============================================================ */



/* ---------- Fuentes (ajusta la ruta a tu proyecto) ---------- */



















:root{

  /* ---------- Fondos ---------- */

  --ph-void:#150B1E;        /* fondo principal            */

  --ph-aubergine:#20132E;   /* sección alterna            */

  --ph-royal:#2E1642;       /* gradientes, profundidad    */

  --ph-tyrian:#58184A;      /* acentos oscuros, halos     */

  --ph-card:#1B1029;        /* tarjetas y paneles         */



  /* ---------- Marca ----------

     Amethyst = el LOGO (gráfico). Heliotrope = TEXTO.

     No son intercambiables: Amethyst da 5.26 sobre Void,

     suficiente para gráficos y texto grande, pero Heliotrope

     (9.30) es el que debe llevar links y labels pequeños.     */

  --ph-amethyst:#A96BD8;

  --ph-heliotrope:#C9A6F2;



  /* ---------- Texto (nunca #FFF) ---------- */

  --ph-bone:#F0E9F4;

  --ph-bone-dim:rgba(240,233,244,.70);

  --ph-bone-faint:rgba(240,233,244,.46);



  /* ---------- Líneas ---------- */

  --ph-line:rgba(240,233,244,.14);

  --ph-line-strong:rgba(240,233,244,.28);



  /* ---------- Semánticos ----------

     Solo juntos cuando se habla de red/blue team.

     Nunca como decoración suelta.                              */

  --ph-ember:#FF8A73;   /* ofensiva, alerta, severidad  */

  --ph-ice:#7FA8FF;     /* defensa, estado OK           */

  --ph-viridian:#3FD99B;/* CONFIRMA: cerrado, detectado, operativo */



  /* ---------- Tipografía ---------- */

  --ph-display:'Inter Tight','Inter',system-ui,sans-serif;

  --ph-sans:'Inter',system-ui,-apple-system,sans-serif;

  --ph-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;



  /* ---------- Forma y ritmo ---------- */

  --ph-radius:2px;          /* todo, salvo pills          */

  --ph-radius-pill:100px;

  --ph-wrap:100%;           /* sin tope: el contenido ocupa el ancho,
                             como en producción. El respiro lo da
                             --ph-gutter (clamp 24-72px).           */

  --ph-gutter:clamp(24px,4.5vw,72px);



  /* ---------- Movimiento ---------- */

  --ph-ease:cubic-bezier(.22,.61,.36,1);

  --ph-fast:.2s;

  --ph-base:.4s;

  --ph-slow:.7s;

}



/* ============================================================

   Base recomendada

   ============================================================ */

body{

  background:var(--ph-void);

  color:var(--ph-bone);

  font-family:var(--ph-sans);

  font-size:16px;

  line-height:1.6;

  -webkit-font-smoothing:antialiased;

}



/* Titulares */

h1,h2,h3{

  font-family:var(--ph-display);

  font-weight:700;

  letter-spacing:-.03em;

  line-height:1.05;

}



/* Énfasis en titulares — RETIRADO en la v3.0.

   Se probaron seis variantes: cursiva 400, cursiva 700, cursiva con

   Amatista, cursiva con Heliotrope, subrayado y cambio de peso.

   Ninguna aportaba lo suficiente para justificar una señal más en

   una interfaz que ya distingue por color (Ember/Ice/Viridian) y por

   familia tipográfica (Inter / IBM Plex Mono).



   Los titulares van monocromos, a un solo peso. Si una palabra necesita

   destacar, el problema está en el titular, no en su formato.



   La clase se conserva sin efecto para no romper el marcado existente. */

.ph-mark{font-weight:inherit;font-style:normal;}



/* Eyebrow — la etiqueta mono sobre cada título */

.ph-eyebrow{

  font-family:var(--ph-mono);

  font-size:.72rem;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:var(--ph-heliotrope);

}



/* ---------- Grain: la firma de acabado ----------

   Va sobre CADA sección, bajo el texto. Sin él, las

   superficies se ven planas y no parecen Purple Hackers. */

.ph-grain{position:relative;}

.ph-grain::before{

  content:"";position:absolute;inset:0;z-index:0;

  pointer-events:none;opacity:.05;mix-blend-mode:overlay;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");

}

.ph-grain > *{position:relative;z-index:1;}



/* ============================================================

   Componentes base

   ============================================================ */

.ph-btn{

  display:inline-flex;align-items:center;justify-content:center;gap:8px;

  font-family:var(--ph-sans);font-weight:600;font-size:.92rem;

  padding:.86em 1.5em;border-radius:var(--ph-radius);

  transition:transform var(--ph-fast) var(--ph-ease),opacity var(--ph-fast),

             border-color var(--ph-fast),background var(--ph-fast);

}

.ph-btn:hover{transform:translateY(-2px);}

.ph-btn:active{transform:translateY(0);}

.ph-btn-primary{background:var(--ph-bone);color:#1B0F24;}

.ph-btn-primary:hover{opacity:.92;}

.ph-btn-ghost{border:1px solid var(--ph-line-strong);color:var(--ph-bone);background:none;}

.ph-btn-ghost:hover{border-color:var(--ph-amethyst);background:rgba(169,107,216,.10);}



.ph-card{

  background:var(--ph-card);

  border:1px solid var(--ph-line);

  border-radius:var(--ph-radius);

  padding:28px 26px;

  transition:border-color var(--ph-base),transform var(--ph-base) var(--ph-ease);

}

.ph-card:hover{border-color:var(--ph-line-strong);transform:translateY(-4px);}



.ph-pill{

  font-family:var(--ph-mono);font-size:.68rem;

  letter-spacing:.1em;text-transform:uppercase;

  padding:5px 11px;border-radius:var(--ph-radius-pill);

  border:1px solid rgba(169,107,216,.42);color:var(--ph-heliotrope);

}

.ph-pill--attack{color:var(--ph-ember);border-color:rgba(255,138,115,.4);}

.ph-pill--defend{color:var(--ph-ice);border-color:rgba(127,168,255,.4);}



/* Cita / testimonio.

   La comilla va en Amatista al 55%: Tyrian es color de FONDO y sobre

   una tarjeta da 1.43 de contraste — se lee como un borrón, no como

   una comilla. */

.ph-quote{

  background:linear-gradient(160deg,var(--ph-card),var(--ph-void));

  border:1px solid var(--ph-line);border-radius:var(--ph-radius);

  padding:28px 26px;display:flex;flex-direction:column;gap:20px;

}

.ph-quote .mark{

  font-family:var(--ph-display);font-weight:700;font-size:3.4rem;line-height:.6;

  color:var(--ph-amethyst);opacity:.55;height:26px;

}



/* Estado que confirma — el patrón de Viridian */

.ph-status-ok{

  font-family:var(--ph-mono);font-size:.72rem;letter-spacing:.1em;

  color:var(--ph-viridian);display:inline-flex;align-items:center;gap:9px;

}

.ph-status-ok::before{

  content:"";width:8px;height:8px;border-radius:50%;

  background:var(--ph-viridian);box-shadow:0 0 0 4px rgba(63,217,155,.18);

}



/* Foco visible — requisito de accesibilidad, no opcional */

:focus-visible{

  outline:2px solid var(--ph-heliotrope);

  outline-offset:3px;

  border-radius:1px;

}



/* Respeta la preferencia del sistema */

@media (prefers-reduced-motion:reduce){

  *{animation:none !important;transition:none !important;}

  html{scroll-behavior:auto;}

}