@charset "UTF-8";
/* ==========================================================================
   Avanzando Hacia el Éxito · One Stop Career Center of Puerto Rico
   css/01-fonts-and-tokens.css

   The Asap typeface and the design tokens: One Stop's red and grays, text sizes,
   spacing, high contrast, the page column and the buttons.

   Sections in this file:
   DESIGN TOKENS

   index.html loads css/01 to css/07 in this order and the later files build on
   the earlier ones: they reuse the colours and sizes defined in 01 as custom
   properties (var(--brand), var(--ink)…), and where two rules tie, the later
   file wins. Keep the order.
   ========================================================================== */

/* Asap, the typeface of onestopcareerpr.org (its headings and text use it at
   400–800). Served from fonts/ on the same site, so the page makes no outside requests;
   only the Latin set, which covers Spanish (accents, ñ, ¿ ¡, « », “ ”).
   font-display:swap paints the first text in the system font at once and
   switches when Asap is ready, so a slow phone never waits on it. */
@font-face{
  font-family:"Asap";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/asap-latin-variable.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;
}

/* ============================================================
   DESIGN TOKENS

   Red and gray are the ones onestopcareerpr.org paints its pages
   with. The red is their #C90000 (6.0:1 on white, safe for text
   as well as fills); only the logo octagon keeps its own #B1151A.
   The red identifies and drives the primary action; it never
   covers a large surface, because a mostly red screen reads as
   an alarm and this reader arrives tense already. The one red
   surface is the component's footer, with their wave along its top
   edge, the way every page of their site ends.
   ============================================================ */
:root{
  --brand:#c90000;
  --brand-dark:#a30000;
  /* Their brighter red, the other end of the gradient on their buttons and
     red bands. White on it is 4.7:1, so it is never used behind small text
     on its own, only blended with --brand. */
  --brand-bright:#ea0000;
  --brand-tint:#fbe9e9;
  --brand-line:#f2bfbf;

  /* Assistance colour: accessibility, glossary, plain-language, privacy.
     Deliberately not red, so help never looks like a warning. It is the
     gray their pages use for text and dark bars (#54595F, 7.1:1 on white),
     with their light grays for tints and borders. */
  --calm:#54595f;
  --calm-dark:#3f4347;
  --calm-tint:#f2f2f2;
  --calm-line:#dddddd;

  --ok:#146b3a;
  --ok-tint:#e8f4ec;
  --ok-line:#bfe0cb;
  --warn:#8a5a00;
  /* Tip and caution boxes ("Importante:", the lesson tips): a bright
     yellow that reads as "look here". Text on it stays #5c3c00, 8:1. */
  --warn-tint:#ffee99;
  --warn-line:#f5cd47;

  --read-hl:#ffeaa0;

  --ink:#14181c;
  --ink-2:#54595f;
  --ink-3:#6f767e;
  --line:#dddddd;
  --line-2:#e9e9e9;

  /* Relleno suave: píldoras, insignias, medidores y el realce al pasar el cursor.
     Vale lo mismo que --line-2, pero es un trabajo distinto: --line y --line-2 son
     bordes. En alto contraste los bordes se van a negro y estos rellenos no pueden
     seguirlos, porque llevan texto encima. Compartir el token dejaba número negro
     sobre círculo negro. */
  --wash:#f2f2f2;
  --bg:#f8f8f8;
  --surface:#ffffff;
  /* Their dark gray, for the dark surface of the glossary tooltip. White on
     it is 7.1:1. */
  --deep:#54595f;

  --radius:14px;
  --radius-lg:20px;
  --shadow-1:0 1px 2px rgba(16,20,24,.06),0 2px 6px rgba(16,20,24,.05);
  --shadow-2:0 8px 28px rgba(16,20,24,.10),0 2px 8px rgba(16,20,24,.06);
  --shadow-3:0 30px 70px rgba(16,20,24,.24);

  /* Asap as on the official site; the system stack covers any glyph
     outside its Latin set and the instant before it loads. */
  --font:"Asap",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Reading scale, changed by the A− / A+ control and kept per device. */
  --scale:1;
  --base:calc(17px * var(--scale));
  --tap:48px;

  /* One side margin for every full-width band. Bands set vertical
     padding only, so nothing can drift out of alignment. */
  --gutter:20px;
}
@media(max-width:400px){ :root{ --gutter:16px } }

html[data-contrast="high"]{
  --ink:#000000; --ink-2:#151515; --ink-3:#262626;
  --bg:#ffffff; --surface:#ffffff;
  --line:#000000; --line-2:#000000;
  --brand:#8f0000; --brand-bright:#8f0000; --brand-tint:#ffffff; --brand-line:#000000;
  --calm:#26292c; --calm-tint:#ffffff; --calm-line:#000000;
  --ok:#0b4d28; --ok-tint:#ffffff; --ok-line:#000000;
  --warn:#5c3c00; --warn-tint:#ffffff; --warn-line:#000000;
  --deep:#000000;
  --shadow-1:none; --shadow-2:none; --shadow-3:0 0 0 2px #000;

  /* El relleno se invierte en vez de desaparecer: negro macizo, y el texto encima
     pasa a blanco en las reglas de abajo. Da 21:1, que es justo lo que se vino a
     buscar al pulsar el botón. */
  --wash:#000000;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .chap{border-width:2px}

/* Todo lo que se rellena con --wash lleva su texto en blanco. Sin esto el texto se
   queda en --ink, que en este modo también es negro. */
html[data-contrast="high"] .pill,
html[data-contrast="high"] .opt .n,
html[data-contrast="high"] .stage .b,
html[data-contrast="high"] .sec.child .sid,
html[data-contrast="high"] .search .clr,
html[data-contrast="high"] .lawlist li::before,
html[data-contrast="high"] .btn-quiet:hover,
html[data-contrast="high"] .icobtn:hover,
html[data-contrast="high"] .chap-head:hover,
html[data-contrast="high"] .chap-head:hover .chap-plain,
html[data-contrast="high"] .chap-head:hover .chap-meta{color:#ffffff}

/* Sólo se aclara lo que hereda el color del encabezado. Lo que trae fondo propio se
   deja en paz: la etiqueta "Ya lo leíste" y la de "nuevo" se pintan sobre blanco en
   este modo, y el resaltado de búsqueda sobre ámbar. Aclararlos también —que es lo
   que hacía un selector universal— los dejaba blanco sobre blanco.
   El resaltado fija su color en vez de heredarlo, porque dentro del encabezado en
   hover lo que hereda es blanco. */
html[data-contrast="high"] mark{color:#000000}

/* El medidor y los puntos de progreso no se invierten: ahí el relleno *es* el dato.
   Si el canal se pinta de negro, el avance deja de distinguirse del fondo. Se quedan
   en blanco con borde negro, y lo que marca el progreso va en negro macizo. */
html[data-contrast="high"] .barmeter{background:#ffffff;border:2px solid #000}
html[data-contrast="high"] .barmeter i{background:#000000}
html[data-contrast="high"] .steps-dots i{background:#ffffff;box-shadow:inset 0 0 0 1px #000}
html[data-contrast="high"] .steps-dots i.on{background:#000000}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;font-family:var(--font);font-size:var(--base);line-height:1.7;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4{line-height:1.25;margin:0}
p{margin:0 0 1em}
a{color:var(--brand)}
img{max-width:100%}
.wrap{
  max-width:1120px;margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--calm);outline-offset:2px;border-radius:6px}

/* ---------- Buttons ----------
   The shape and the primary fill follow onestopcareerpr.org: pill buttons
   (their 30px radius), the primary in their red gradient with a soft
   shadow, and on hover the gradient turns round rather than changing
   colour. Secondary buttons answer the pointer the way their menu does:
   the text and the border go red. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:12px 22px;border-radius:999px;border:1px solid transparent;
  font-family:var(--font);font-size:1em;font-weight:700;line-height:1.2;
  cursor:pointer;text-decoration:none;transition:background .3s,border-color .3s,color .3s,box-shadow .3s;
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-primary{
  background:linear-gradient(210deg,var(--brand) 0%,var(--brand-bright) 81%);color:#fff;
  box-shadow:2px 2px 8px -1px rgba(0,0,0,.19);
}
.btn-primary:hover{background:linear-gradient(100deg,var(--brand-bright) 34%,var(--brand) 100%)}
html[data-contrast="high"] .btn-primary{background:var(--brand);box-shadow:none}
.btn-calm{background:var(--calm);color:#fff}
.btn-calm:hover{background:var(--calm-dark)}
.btn-ok{background:var(--ok);color:#fff}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-quiet{background:transparent;color:var(--ink-2);border-color:transparent;padding:10px 14px}
.btn-quiet:hover{background:var(--wash);color:var(--brand)}
.btn-sm{min-height:40px;padding:8px 16px;font-size:.92em}
.btn-block{width:100%}
.btn[disabled]{opacity:.4;cursor:default}