/* =========================================================
   RightNewsRightNow  |  Design tokens
   Every color, size and spacing value in rnrn.css comes from here.
   Change the brand here, not in component rules.
   ========================================================= */

:root {
  /* ---- Brand palette ------------------------------------ */
  --rn-navy:        #0A3161;  /* "Old Glory Blue". Masthead, nav text, footer, canton blocks */
  --rn-navy-deep:   #06213F;  /* Utility bar, footer base, hover on navy */
  --rn-red:         #B31942;  /* "Old Glory Red". Breaking, kickers, links on hover, accents */
  --rn-red-deep:    #8E1235;  /* Pressed/hover state on red */
  --rn-white:       #FFFFFF;  /* Page base */
  --rn-linen:       #F4F6F9;  /* Quiet panels, sidebar, alt sections (cool, not cream) */
  --rn-sky:         #DCE6F2;  /* Tint for navy surfaces, source chip background */
  --rn-blush:       #FBE9ED;  /* Tint for red surfaces (breaking banner on light) */
  --rn-brass:       #C9A227;  /* Star glyph only. Never for text on white */

  /* ---- Neutrals ----------------------------------------- */
  --rn-ink:         #0E1726;  /* Headlines and body text  (18.0:1 on white) */
  --rn-slate:       #3D4A5C;  /* Secondary text, deks     (9.0:1 on white) */
  --rn-steel:       #5B6878;  /* Meta, timestamps         (5.7:1 on white) */
  --rn-rule:        #D5DBE3;  /* Hairlines and dividers */
  --rn-rule-strong: #0E1726;  /* Heavy rules under section headers */

  /* ---- Semantic aliases --------------------------------- */
  --c-bg:           var(--rn-white);
  --c-surface:      var(--rn-linen);
  --c-text:         var(--rn-ink);
  --c-text-2:       var(--rn-slate);
  --c-meta:         var(--rn-steel);
  --c-link:         var(--rn-navy);
  --c-link-hover:   var(--rn-red);
  --c-kicker:       var(--rn-red);
  --c-focus:        #F2B705;  /* Focus ring. Gold reads on white, navy and red */
  --c-success:      #1E6B3A;
  --c-error:        var(--rn-red);

  /* ---- Type families ------------------------------------ */
  --f-display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-ui:      "Barlow", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-read:    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* ---- Type scale (fluid, mobile -> desktop) ------------ */
  --t-mega:  clamp(2.75rem, 1.6rem + 4.6vw, 5rem);      /* 44 -> 80  top story */
  --t-h1:    clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);     /* 40 -> 56  article headline, category title */
  --t-h2:    clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);  /* 28 -> 36  featured lead */
  --t-h3:    clamp(1.375rem, 1.25rem + .5vw, 1.625rem); /* 22 -> 26  card headline */
  --t-h4:    1.25rem;   /* 20  headline list item */
  --t-body:  1.125rem;  /* 18  UI body */
  --t-read:  1.25rem;   /* 20  article body (serif) */
  --t-dek:   1.3125rem; /* 21  deks / summaries */
  --t-small: 1rem;      /* 16  meta, nav */
  --t-micro: .8125rem;  /* 13  kickers, labels (uppercase, tracked) */

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-ui:    1.45;
  --lh-read:  1.65;

  --track-kicker: .12em;
  --track-head:   -.005em;

  /* ---- Spacing: 8px grid -------------------------------- */
  --s-0: 4px;   /* half-step, hairline gaps only */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;

  /* ---- Layout ------------------------------------------- */
  --w-page:    1280px;
  --w-read:    68ch;
  --w-rail:    320px;
  --gutter:    clamp(16px, 3vw, 32px);

  /* ---- Shape & depth ------------------------------------ */
  --r-sm:   4px;   /* cards, chips, inputs */
  --r-md:   8px;   /* panels, source box */
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(14, 23, 38, .06), 0 1px 1px rgba(14, 23, 38, .04);
  --sh-2: 0 6px 16px -6px rgba(10, 49, 97, .22), 0 2px 4px rgba(14, 23, 38, .06);
  --sh-3: 0 18px 40px -16px rgba(10, 49, 97, .35);

  /* The 13-stripe rule. Used by .stripes and section headers */
  --stripes: repeating-linear-gradient(
    to bottom,
    var(--rn-red) 0 2px,
    var(--rn-white) 2px 4px
  );

  /* ---- Motion ------------------------------------------- */
  --ease:   cubic-bezier(.2, .7, .2, 1);
  --d-fast: 120ms;
  --d-med:  220ms;
  --d-slow: 480ms;
  --ticker-speed: 60s;

  /* ---- Layers ------------------------------------------- */
  --z-nav: 50;
  --z-drawer: 80;
  --z-toast: 90;
}