/* ============================================================
   COURIER DESIGN SYSTEM — global entry point.
   Consumers link THIS file only. Imports order: fonts first,
   then tokens. Keep this file to @import lines only.
   ============================================================ */

/* COURIER webfonts — Montserrat (the brand typeface).
   Montserrat is an open-source font; sourced from Google Fonts.
   Bold (700) for headlines, Regular (400) for body, plus the weights
   used across the system. The @import below loads the @font-face rules. */

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-02.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-03.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-04.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-05.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-06.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-02.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-03.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-04.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-05.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-06.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-11.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-11.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-11.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-11.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/asset-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/asset-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/asset-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/asset-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/asset-11.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;
}


/* ============================================================
   COURIER — COLOR TOKENS
   The COURIER palette is deliberately tiny: black, white, and a
   single high-voltage yellow. Per the National Style Guide the
   logo only ever appears in white or black — never yellow.
   ============================================================ */

:root {
  /* ---- Brand primitives ---- */
  --courier-yellow: #FCEE21;   /* the signal color — headline bars, accents, borders */
  --courier-black:  #000000;   /* pure black — primary background + logo */
  --courier-ink:    #1A1A1A;   /* near-black — panels, embedded-photo fields, body on white */
  --courier-white:  #FFFFFF;   /* pure white — background + logo + headline text on dark */

  /* ---- Yellow tints/shades (for hover & press only; never the logo) ---- */
  --courier-yellow-press: #E6D800;  /* pressed/active yellow */
  --courier-yellow-soft:  #FFF7A8;  /* faint yellow wash, rare */

  /* ---- Neutral ramp (UI surfaces, hairlines, captions) ---- */
  --neutral-900: #0A0A0A;
  --neutral-800: #1A1A1A;
  --neutral-700: #2E2E2E;
  --neutral-600: #4A4A4A;
  --neutral-400: #8A8A8A;
  --neutral-300: #BFBFBF;
  --neutral-200: #E2E2E2;
  --neutral-100: #F2F2F2;

  /* ============================================================
     SEMANTIC ALIASES
     Four legal background fields per the style guide:
     black, yellow, photo, or white.
     ============================================================ */

  /* Backgrounds */
  --bg-black:  var(--courier-black);
  --bg-white:  var(--courier-white);
  --bg-yellow: var(--courier-yellow);
  --bg-ink:    var(--courier-ink);      /* embedded-photo / panel field */

  /* Text */
  --text-on-dark:   var(--courier-white);   /* white type on black/photo */
  --text-on-light:  var(--courier-black);   /* black type on white/yellow */
  --text-on-yellow: var(--courier-black);   /* type inside the yellow bar */
  --text-muted:     var(--neutral-400);     /* captions, sourcing, meta */

  /* Signal / accent */
  --accent:        var(--courier-yellow);
  --accent-bar:    var(--courier-yellow);   /* the yellow headline bar */
  --accent-border: var(--courier-yellow);   /* hairline / focus borders */
  --accent-press:  var(--courier-yellow-press);

  /* Hairlines & dividers */
  --line-on-dark:  rgba(255,255,255,0.16);
  --line-on-light: rgba(0,0,0,0.14);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(252,238,33,0.55);
}

/* ============================================================
   COURIER — TYPOGRAPHY TOKENS
   One family: Montserrat. Bold for headlines, Regular for body.
   COURIER headlines are frequently set in UPPERCASE and tight
   leading — the voice is punchy and declarative.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);   /* headlines */
  --font-body: var(--font-sans);      /* body */

  /* ---- Weights ---- */
  --weight-regular: 400;   /* body */
  --weight-medium: 500;    /* meta / labels */
  --weight-semibold: 600;  /* sub-heads, buttons */
  --weight-bold: 700;      /* headlines (the workhorse) */
  --weight-extra: 800;     /* oversized poster headlines */

  /* ---- Type scale (graphic + UI) ---- */
  --fs-mega: 88px;    /* poster / full-photo hero headline */
  --fs-xxl: 64px;     /* large social headline */
  --fs-xl: 48px;      /* headline */
  --fs-lg: 34px;      /* sub-headline */
  --fs-md: 24px;      /* large body / lead */
  --fs-body: 18px;    /* body */
  --fs-sm: 15px;      /* caption / source / meta */
  --fs-xs: 12px;      /* fine print, labels */

  /* ---- Line heights ---- */
  --lh-tight: 1.02; /* @kind font */
  --lh-snug: 1.12; /* @kind font */
  --lh-body: 1.5; /* @kind font */

  /* ---- Letter-spacing ---- */
  --ls-tight: -0.02em;   /* large bold headlines */
  --ls-normal: 0;        /* @kind font */
  --ls-wide: 0.04em;     /* small uppercase labels */
  --ls-wider: 0.12em;    /* logo wordmark, eyebrows */

  /* ---- Semantic roles ---- */
  --text-headline-weight: var(--weight-bold);
  --text-headline-leading: var(--lh-tight);
  --text-body-weight: var(--weight-regular);
  --text-body-leading: var(--lh-body);
}

/* ============================================================
   COURIER — SPACING & RADIUS TOKENS
   The system is hard-edged and grid-driven. Graphics use a fixed
   margin box (logo locked in the upper-right corner). Corners are
   square by default; rounding is reserved for UI controls only.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Graphic margin box ----
     The safe-area inset used on social graphics; the COURIER logo
     locks into the upper-right corner inside this margin. */
  --graphic-margin: 56px;        /* 1080px canvas */
  --graphic-margin-sm: 40px;     /* tighter / story format */

  /* ---- The yellow headline bar ---- */
  --bar-pad-x: 28px;             /* horizontal padding inside the bar */
  --bar-pad-y: 14px;             /* vertical padding inside the bar */

  /* ---- Radii ---- */
  --radius-none: 0;              /* default — graphics are square-edged */
  --radius-sm: 4px;              /* inputs, small controls */
  --radius-md: 6px;              /* buttons, cards (UI only) */
  --radius-pill: 999px;          /* tags / chips */

  /* ---- Borders ---- */
  --border-hair: 1px;
  --border-strong: 2px;
  --border-bar: 4px;             /* yellow accent rules */

  /* ---- Elevation ---- */
  --shadow-none: none;
  --shadow-ui: 0 2px 8px rgba(0,0,0,0.12);     /* subtle UI card lift */
  --shadow-pop: 0 8px 28px rgba(0,0,0,0.28);   /* dialogs / popovers */
}

/* ============================================================
   COURIER — LAYOUT & MOTION TOKENS
   Graphic constants from the National Style Guide, expressed as
   reusable values: logo lock position, canvas sizes, and the
   motion used on video (the animated yellow bar).
   ============================================================ */

:root {
  /* ---- Canvas sizes ---- */
  --canvas-square: 1080px;       /* 1:1 feed graphic */
  --canvas-story-w: 1080px;      /* 9:16 story / reel */
  --canvas-story-h: 1920px;
  --canvas-video-w: 1920px;      /* 16:9 video frame */
  --canvas-video-h: 1080px;

  /* ---- Logo lock (upper-right corner; size is fixed) ---- */
  --logo-width: 132px;           /* fixed wordmark width on 1080 canvas */
  --logo-inset: var(--graphic-margin);

  /* ---- Headline / body line maxima (per style guide) ---- */
  --headline-max-lines-graphic: 3; /* @kind other */
  --headline-max-lines-video: 5; /* @kind other */
  --body-max-lines-fullphoto: 3; /* @kind other */
  --body-max-lines-embedded: 2; /* @kind other */

  /* ---- Motion ----
     Video uses an animated yellow bar + animated headline.
     Motion is crisp and mechanical: fast wipes, not bounces. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-wipe: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --dur-bar: 520ms; /* @kind other */

  /* ---- Interaction states (UI surfaces) ---- */
  --hover-darken: rgba(0,0,0,0.06);
  --press-scale: 0.98; /* @kind other */
}