/* ===========================================================================
   lamejorclaseenespanol.com — design tokens · identity "Familia"
   ---------------------------------------------------------------------------
   Chosen by Luis 2026-10-07 over Sol and Mercado, after he called v1 "Clara"
   (deep red on cream, serif) too dark. Light and airy: the school's red,
   brightened, on white and soft peach; sky blue for the English side; leaf
   green for check marks. Poppins display, Figtree body, both self-hosted.
   Still visibly separate from All Night (amber, warm paper, Archivo).

   RULE: red and blue clear AA as text and as fills under white text. Gold is
   a FILL ONLY and carries ink; as text it uses --oro-ink.
   ======================================================================== */

:root {
  /* ---- ground ---------------------------------------------------------- */
  --paper:      #FFFFFF;   /* page ground, white */
  --band:       #FFF1E6;   /* alternating section bands */
  --surface:    #FFFFFF;   /* cards */
  --line:       #F2E2D6;   /* rules and borders */
  --deep:       #1A6FD1;   /* the closing call-to-action panel, sky blue */

  /* ---- text ------------------------------------------------------------ */
  --ink:        #1E2235;
  --muted:      #4F566B;
  --dim:        #5F6679;   /* 5.7:1 on white, clears AA at caption size */
  --on-deep:    #EAF3FF;

  /* ---- brand ----------------------------------------------------------- */
  --rojo:       #C92A2A;   /* action fill AND text: white on it 5.46:1, on peach band 4.93:1 (AA). Was #D3302F: 4.48 on peach */
  --rojo-dk:    #8F1D1D;   /* the moulded edge under a red control */
  --rojo-soft:  #FDE7E7;   /* tinted wash behind red marks */
  --oro:        #FFB547;   /* accent fill only - never text */
  --oro-dk:     #DB8E1C;
  --oro-ink:    #7A4E00;   /* gold as text / icon: 6.1:1 on paper */
  --oro-soft:   #FFF0DA;
  --azul:       #1A6FD1;   /* English side: white on it 4.95:1 (AA); preview #1F7AE0 was 4.27, failed */
  --azul-dk:    #13529C;
  --azul-soft:  #E3EFFC;

  --link:       #1663BD;   /* 5.34:1 on peach (button blue #1A6FD1 is 4.48 there) */
  --link-hover: #13529C;
  --on-rojo:    #FFFFFF;
  --on-oro:     #22191A;
  --on-azul:    #FFFFFF;

  /* ---- elevation: warm-tinted, two layers ------------------------------ */
  --shadow-1: 0 1px 2px rgba(58, 18, 18, .05), 0 2px 8px rgba(58, 18, 18, .04);
  --shadow-2: 0 2px 4px rgba(58, 18, 18, .06), 0 8px 24px rgba(58, 18, 18, .07);
  --shadow-3: 0 4px 8px rgba(58, 18, 18, .07), 0 18px 44px rgba(58, 18, 18, .10);
  --edge-hi:  inset 0 1px 0 rgba(255, 255, 255, .9);

  /* ---- type ------------------------------------------------------------ */
  /* Self-hosted, latin subset (covers á é í ó ú ñ ü ¿ ¡). SIL OFL 1.1. Poppins is static: 500/600/700. */
  --font-display: "Poppins", "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.5rem;
  --step-5:  3.25rem;

  /* ---- space ----------------------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.75rem;

  --radius:    22px;
  --radius-sm: 999px;    /* controls are pills: another deliberate difference */

  --wrap: 1160px;
  --gutter: 3rem;
  --tap: 44px;
}

@media (max-width: 760px) {
  :root {
    --step-3: 1.5rem;
    --step-4: 1.875rem;
    --step-5: 2.25rem;
    --gutter: 1rem;
    --s-7: 2.75rem;
  }
}

/* ---- FORMAT colour (2026-10-08) ------------------------------------------
   Red and blue say the LANGUAGE. Orange says the FORMAT: the printed booklet.
   Added after the client's reviewer asked for colour to guide buyers so nobody
   picks the wrong product. Orange is a fill and a frame; as text it uses
   --naranja-ink (6.4:1 on its tint). */
:root {
  --naranja:      #F59E0B;   /* booklet button fill: ink on it 7.3:1 */
  --naranja-dk:   #B45309;   /* moulded edge under the button; tick icons (4.4:1 on tint) */
  --naranja-ink:  #9A3412;   /* orange as text */
  --naranja-soft: #FFEDD5;   /* tag and tick tint */
  --naranja-card: #FFFBF3;   /* booklet card ground */
}