/*
  SANNA Design Tokens
  Source: Manual de Marca SANNA v1.0 (2023)
  Canvas: 1920×1080px (TV / digital screen)
*/

:root {

  /* ─── COLOR PRIMITIVES ─────────────────────────────────────────────── */

  /* Green — Pantone 354 C */
  --color-green-500: #00AF50;
  --color-green-400: #33BF73;
  --color-green-300: #66CF96;
  --color-green-200: #99DFB9;
  --color-green-100: #CCEFDC;
  /* Dark green — Pantone 2411 C */
  --color-green-900: #284623;
  /* Pale green — Pantone 2253 C */
  --color-green-50:  #E1FFD7;

  /* Yellow — Pantone 106 C */
  --color-yellow-500: #FFE150;

  /* Neutral warm tones */
  --color-cream:     #F5EBD7;   /* Pantone 7527 C */
  --color-gray-warm: #CDC3B9;   /* Pantone 401 C  */

  /* Feedback / semantic tints */
  --color-blush:     #FFCDCD;   /* Pantone 182 C  */
  --color-lavender:  #CDD2FF;   /* Pantone 2716 C */
  --color-sky:       #8CF5FF;   /* Pantone 305 C  */

  /* Triage severity colors.
     P1/P2 are conventional clinical emergency reds/oranges — NOT part of the
     SANNA brand palette, but required for medically-correct triage signalling.
     P3/P4 map onto brand tints. Declared here so no literal hex lives in
     slide markup, CSS, or JS. */
  --color-priority-1: #DC3B31;            /* Emergencia · gravedad súbita extrema */
  --color-priority-2: #DF670C;            /* Emergencia · urgencia mayor          */
  --color-priority-3: var(--color-sky);   /* Urgencia · urgencia menor            */
  --color-priority-4: var(--color-green-500); /* Urgencia · patología aguda común */

  /* Translucent brand-green overlays (derived from --color-green-500 /
     rgb(0,175,80)) for tinted strips and rails. */
  --color-green-overlay:        rgba(0, 175, 80, 0.12);
  --color-green-overlay-strong: rgba(0, 175, 80, 0.40);

  /* Base */
  --color-white:     #FFFFFF;
  --color-black:     #000000;

  /* ─── COLOR ROLE TOKENS ────────────────────────────────────────────── */

  --color-brand-primary:      var(--color-green-500);
  --color-brand-dark:         var(--color-green-900);
  --color-brand-light:        var(--color-green-50);

  --color-accent:             var(--color-yellow-500);

  --color-bg-screen:          var(--color-white);
  --color-bg-card:            var(--color-cream);
  --color-bg-muted:           var(--color-gray-warm);

  --color-text-primary:       var(--color-black);
  --color-text-on-brand:      var(--color-white);
  --color-text-muted:         var(--color-gray-warm);

  --color-border-primary:     var(--color-green-500);
  --color-border-dark:        var(--color-green-900);

  /* ─── TYPOGRAPHY ───────────────────────────────────────────────────── */

  /* Font families — files must be placed in assets/fonts/ */
  --font-primary:   'Agrandir', sans-serif;
  --font-secondary: 'Gotham Rounded', sans-serif;

  /* Font weights */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /*
    Scale derived from Pantalla Digital spec (C.2.2) and
    the typographic hierarchy chart (B.3.1).
    Values from the brand manual are in pt; used as px here.

    NOTE — TV-reading adjustment: this loop is viewed by seated patients ~3 m
    from a 1920×1080 screen. The brand's print body sizes (12pt body, 16pt
    resalte) are illegible at that distance, so reading-tier tokens below are
    scaled up for the TV context. Display/title/highlight tiers keep their
    brand values. Original brand pt values are noted inline.
  */

  /* Display — full-screen headline (Agrandir) */
  --text-display-size:        290px;
  --text-display-line-height: 300px;

  /* Display subtitle */
  --text-display-sub-size:        160px;
  --text-display-sub-line-height: 192px;

  /* Title (Agrandir Regular) — B.3.1 64pt */
  --text-title-size:        64px;
  --text-title-line-height: 66px;

  /* Subtitle — B.3.1 20pt */
  --text-subtitle-size:        20px;
  --text-subtitle-line-height: 22px;

  /* Highlight 2 — Agrandir 32pt */
  --text-highlight-size:        32px;
  --text-highlight-line-height: 34px;

  /* Callout / eyebrow — Gotham Rounded Book, UPPERCASE.
     Brand value 16pt → bumped for 3 m legibility. */
  --text-callout-size:        20px;   /* brand: 16pt */
  --text-callout-line-height: 26px;

  /* Body copy — brand value 12pt → bumped for 3 m legibility. */
  --text-body-size:        24px;      /* brand: 12pt */
  --text-body-line-height: 32px;

  /* Dense paragraph notes (long coverage/footnote blocks). */
  --text-note-size:        22px;
  --text-note-line-height: 30px;

  /* Large numeral / Resalte 3 — Gotham Rounded 68pt */
  --text-numeral-size: 68px;

  /* ─── SPACING SCALE ────────────────────────────────────────────────── */

  /* Base unit: 8px */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;
  --space-24: 192px;

  /* Screen-level margins for 1920px canvas (half-grid-unit rule from B.6.6) */
  --margin-screen-x: 80px;
  --margin-screen-y: 60px;

  /* ─── BORDER RADIUS ────────────────────────────────────────────────── */

  /*
    Brand formula: radius = canvas-width / 50
    For 1920px: 1920 / 50 = 38.4px → 38px
  */
  --radius-container: 38px;

  /* Utility aliases */
  --radius-sm:   8px;
  --radius-md:  16px;
  --radius-lg:  38px;   /* matches brand container rule */
  --radius-full: 9999px;

  /* ─── CANVAS ───────────────────────────────────────────────────────── */

  --canvas-width:  1920px;
  --canvas-height: 1080px;

}