/* ==========================================================================
   CARAPP / Carabineros de Chile — Design Tokens
   Colors + Typography
   ========================================================================== */

/* Fonts — loaded from local brand files (variable TTFs, wdth + wght axes).
   BRAND FONT: Roboto. Used for both display and body.
   We vary weight + width + case to get display vs body contrast:
     • Display / headlines → Roboto 900 UPPERCASE, condensed width (75), tight tracking
     • Body / UI           → Roboto 400/500/700 normal width (100), sentence-case
   Roboto Condensed is synthesized from the width axis — no separate file needed.
*/
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
/* Roboto Condensed — same file, narrow width axis locked via font-stretch */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75%;
  font-style: italic;
  font-display: swap;
}
/* Merriweather kept as optional editorial serif — still from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ====== BRAND — Institutional Greens ====== */
  --carap-green-900: #003D1F;   /* Deepest forest — backgrounds, headers */
  --carap-green-800: #005C2E;   /* Dark institutional green */
  --carap-green-700: #007E47;   /* PRIMARY — Carabineros official green (from logo) */
  --carap-green-600: #0A9949;   /* Hover / active */
  --carap-green-500: #2EB354;   /* CARAPP lime (bright bubble) */
  --carap-green-400: #52C270;   /* Accent light */
  --carap-green-300: #8FD9A0;   /* Tint */
  --carap-green-200: #C6EDCD;   /* Soft wash */
  --carap-green-100: #E6F6E9;   /* Subtle background tint */
  --carap-green-050: #F2FBF4;   /* Barely-there wash */

  /* Legacy aliases matching the SVG crest fill exactly */
  --carap-primary: #007E47;
  --carap-primary-dark: #005C2E;
  --carap-primary-lime: #2EB354;

  /* ====== NEUTRALS ====== */
  --neutral-000: #FFFFFF;
  --neutral-050: #FAFAF7;        /* Off-white paper tone (poster backgrounds) */
  --neutral-100: #F2F2EE;
  --neutral-200: #E4E4DE;
  --neutral-300: #CFCFC7;
  --neutral-400: #A8A8A0;
  --neutral-500: #7A7A72;
  --neutral-600: #545450;
  --neutral-700: #333330;
  --neutral-800: #1C1C1A;
  --neutral-900: #0A0A09;

  /* ====== SEMANTIC ACCENTS ======
     These appear in institutional posters: red for alerts/importance,
     yellow for warnings/callouts, Chilean-flag blue where nationalism matters. */
  --alert-red: #D3202A;          /* "¡No lo abras!" red, "ATENCIÓN" pills */
  --alert-red-dark: #A81820;
  --warn-yellow: #F4D03F;        /* "IMPORTANTE" warning boxes */
  --warn-yellow-dark: #D4AF1F;
  --chile-blue: #0032A0;         /* Flag blue — use sparingly, patriotic contexts */
  --mourning-black: #0A0A09;     /* Luto ribbons ("Héroes de Arauco") */

  /* ====== FOREGROUND / BACKGROUND (semantic) ====== */
  --fg-1: var(--neutral-900);              /* Primary text */
  --fg-2: var(--neutral-700);              /* Secondary text */
  --fg-3: var(--neutral-500);              /* Tertiary / meta */
  --fg-inverse: var(--neutral-000);        /* Text on green/dark */
  --fg-brand: var(--carap-green-700);      /* Text in brand color */
  --fg-link: var(--carap-green-700);

  --bg-1: var(--neutral-000);              /* App canvas */
  --bg-2: var(--neutral-050);              /* Card / surface */
  --bg-3: var(--neutral-100);              /* Subtle alternate */
  --bg-brand: var(--carap-green-700);      /* Primary green surface */
  --bg-brand-dark: var(--carap-green-900);
  --bg-brand-soft: var(--carap-green-100);

  /* ====== BORDERS ====== */
  --border-1: var(--neutral-200);
  --border-2: var(--neutral-300);
  --border-brand: var(--carap-green-700);
  --border-strong: var(--neutral-800);

  /* ====== SHADOWS ======
     The brand uses soft institutional shadows — nothing flashy. Posters
     tend to use hard drop-shadows on cut-out photography; UI cards use
     gentle elevation. */
  --shadow-xs: 0 1px 2px rgba(0, 62, 31, 0.06);
  --shadow-sm: 0 2px 4px rgba(0, 62, 31, 0.08), 0 1px 2px rgba(0, 62, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 62, 31, 0.10), 0 2px 4px rgba(0, 62, 31, 0.06);
  --shadow-lg: 0 12px 28px rgba(0, 62, 31, 0.14), 0 4px 8px rgba(0, 62, 31, 0.08);
  --shadow-poster: 0 20px 40px -10px rgba(0, 62, 31, 0.35);  /* cut-out photography */
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);

  /* ====== RADII ======
     Posters lean on generous pill radii (headline pills, callout chips).
     UI is more restrained. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;          /* CARAPP wordmark pill, chip callouts */
  --radius-card: 16px;

  /* ====== SPACING (4px base) ====== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ====== TYPOGRAPHY — FAMILIES ====== */
  --font-display: 'Roboto Condensed', 'Roboto', 'Impact', system-ui, sans-serif; /* Display headlines (condensed variant for poster feel) */
  --font-sans: 'Roboto', -apple-system, 'Segoe UI', system-ui, sans-serif;        /* Body + UI — THE brand font */
  --font-serif: 'Merriweather', 'Georgia', serif;                                 /* Editorial / formal copy */
  --font-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* ====== TYPOGRAPHY — WEIGHTS ====== */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ====== TYPOGRAPHY — SCALE (mobile-first) ====== */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 60px;
  --text-6xl: 76px;

  /* ====== LINE HEIGHTS ====== */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* ====== MOTION ====== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph: cubic-bezier(0.3, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY — apply directly to elements or use as classes
   Posters (examples) use Roboto Cond for everything; UI uses Roboto for body
   and reserves Roboto Cond for heroes/headlines only.
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display / Hero — poster headlines, splash screens */
.h-display,
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* H2 — section titles */
.h-2, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* H3 — card titles, post titles */
.h-3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

/* H4 — subsection */
.h-4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

/* Eyebrow — small-caps label, often appears above headlines ("ATENCIÓN A:") */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Body text */
.p, p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.p-lg { font-size: var(--text-md); line-height: var(--leading-normal); }
.p-sm { font-size: var(--text-sm); }

/* Meta — timestamps, footer data */
.meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

/* Button / UI label */
.label {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

/* Quote / formal institutional copy */
blockquote, .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  border-left: 4px solid var(--border-brand);
  padding-left: var(--space-4);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.12em 0.35em;
  border-radius: var(--radius-xs);
}

/* Poster headline — the hallmark CARAPP/Carabineros style:
   condensed, BOLD, UPPERCASE, often with a red accent phrase */
.poster-headline {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.poster-headline--alert { color: var(--alert-red); }
.poster-headline--brand { color: var(--carap-green-700); }
.poster-headline--light { color: var(--fg-inverse); }

/* Pill chip — "ATENCIÓN A:", "REQUISITOS", "SI INGRESASTE TUS DATOS:" */
.pill-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--alert-red);
  color: var(--fg-inverse);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pill-chip--brand { background: var(--carap-green-700); }
.pill-chip--dark { background: var(--carap-green-900); }
.pill-chip--warn { background: var(--warn-yellow); color: var(--neutral-900); }