/* ==========================================================================
   Iguazu Noticias — Design tokens

   Ported verbatim from the design system's tokens/{colors,typography,spacing,
   effects}.css. One :root because they are one layer and every page needs all
   of them; splitting would buy four extra requests and nothing else.

   Colour direction: forest and water lead, orchid is the premium whisper.
   Pale leaf owns interaction; orchid marks premium moments only, never a large
   fill; deep purple is the dark surface.
   ========================================================================== */

:root {
    /* ---- Brand palette (as provided) ---- */
    --green-100: #baebae;   /* pale leaf */
    --green-400: #72e797;   /* mint */
    --violet-500: #736fdb;  /* periwinkle */
    --purple-900: #4a1b87;  /* deep jungle purple */
    --magenta-700: #983894; /* orchid magenta */

    /* ---- Derived (harmonized with the brand palette) ---- */
    --magenta-100: #f7e6f6;
    --magenta-800: #7d2b7a;
    --magenta-900: #621d60;
    --violet-100: #edebfb;
    /* Mid-pale periwinkle. Reads against both white cards and --neutral-100,
       which --violet-100 does not; used for the "ship in port" band and its
       legend swatch on the For Cruisers timelines. */
    --violet-200: #cfcaf2;
    --violet-700: #5a54c8;
    --purple-950: #31115c;
    --green-50: #eaf8e6;
    --green-200: #a6e3a2;
    --green-300: #8fdc97;
    --green-700: #1e7a45;
    --ink: #26123f;
    --neutral-600: #6b627c;
    --neutral-400: #9d94ac;
    --neutral-200: #ddd8e4;
    --neutral-100: #f0eef4;
    --paper: #ffffff;
    --tint: #f7f5fb;

    /* ---- Semantic status ---- */
    --success: #1e7a45;
    --success-bg: #e0f6e6;
    /* Darkened from #a06a0a, which sat at 4.11:1 on --warning-bg and missed AA
       for the 12px/600 verdict chip. 4.59:1 now. The other consumer is the
       review-star fill, a graphic on white where 3:1 is the bar. */
    --warning: #96630a;
    --warning-bg: #fdf1d8;
    --danger: #c92d5d;
    --danger-bg: #fbe4ec;

    /* ---- Role aliases ---- */
    --color-primary: var(--green-100);
    --color-primary-hover: var(--green-200);
    --color-primary-active: var(--green-300);
    --color-secondary: var(--violet-500);
    --color-accent: var(--magenta-700);
    --color-accent-hover: var(--magenta-800);
    --text-body: var(--ink);
    --text-muted: var(--neutral-600);
    --text-inverse: #ffffff;
    --text-link: var(--violet-700);
    --surface-page: var(--paper);
    --surface-card: var(--paper);
    --surface-tint: var(--tint);
    --surface-tint-green: var(--green-50);
    --surface-dark: var(--purple-900);
    --border-strong: var(--ink);
    --border-subtle: var(--neutral-200);
    --focus-ring: var(--violet-500);
    --overlay: rgba(38, 18, 63, 0.55);

    /* ---- Typography ---- */
    --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --weight-display: 800;
    --weight-body: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 48px;
    --text-5xl: 64px;

    --leading-tight: 1.08;
    --leading-snug: 1.25;
    --leading-normal: 1.6;
    --tracking-tight: -0.02em;
    --tracking-caps: 0.1em;

    /* ---- Spacing and measure ---- */
    --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;
    --container: 1120px;
    /* Text-heavy guide pages, where 1120px runs past a comfortable measure. */
    --container-mid: 1000px;
    /* A single column of editorial prose, with nothing beside it. */
    --container-article: 760px;
    --container-narrow: 720px;

    /* ---- Corners: rounded everywhere ---- */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 24px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* ---- Shadows: layered, soft, purple-cast ---- */
    --shadow-card: 0 6px 24px rgba(38, 18, 63, 0.08);
    --shadow-lift: 0 16px 40px rgba(38, 18, 63, 0.14);
    --shadow-pop: 0 24px 80px rgba(38, 18, 63, 0.28);
    --shadow-press: 0 2px 8px rgba(38, 18, 63, 0.10);
    --shadow-primary: 0 10px 24px rgba(94, 196, 120, 0.38);
    --shadow-primary-hover: 0 14px 30px rgba(94, 196, 120, 0.48);
    --shadow-accent: 0 10px 24px rgba(152, 56, 148, 0.3);

    /* ---- Motion ---- */
    --dur: 200ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ---- Layout constants shared by the sticky nav and anchor offsets ---- */
    --secnav-height: 56px;
    --scroll-offset: 84px;
}