/* =====================================================================
   Rundown — Design Tokens
   Import this file (and the fonts below) to inherit the brand system.
   @import url("tokens.css");
   ===================================================================== */

/* ---- Type: Newsreader (display/serif) + Inter (UI/sans) ---- */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---- Backgrounds ---- */
  --bg:            #FBF9F4;   /* warm paper — primary surface */
  --bg-surface:    #FFFFFF;   /* cards */
  --bg-cream:      #E9E4DA;   /* sunken surfaces, chips */
  --bg-cream-light:#F2EEE5;   /* hover, subtle fills */

  /* ---- Text ---- */
  --text:    #1A1A1A;         /* ink */
  --text-2:  #555550;         /* secondary */
  --text-3:  #8C8A82;         /* tertiary / labels */
  --text-on-dark: #FBF9F4;

  /* ---- Brand: teal (the press's first ink) ---- */
  --brand:       #0F6E7C;
  --brand-dark:  #0B5660;
  --brand-cyan:  #1AA6B7;     /* process cyan — "published" / highlight */
  --brand-cyan-soft: #A6DAE0;
  --brand-cyan-pale: #D5ECEF;

  /* ---- CMYK accents (the editorial color system) ---- */
  --cyan:    #1AA6B7;
  --magenta: #D14C7A;         /* the query color — also the mark's chevron */
  --yellow:  #E8B84A;
  --key:     #1A1A1A;
  --magenta-pale:#F4DAE3; --magenta-deep:#8B2A4F;
  --yellow-pale: #FAEFCF;  --yellow-deep: #6A4A0F;

  /* ---- Editorial status (maps the inks to product meaning) ---- */
  --status-draft:     var(--magenta);
  --status-review:    var(--yellow);
  --status-scheduled: var(--cyan);
  --status-published: var(--brand);

  /* ---- Lines ---- */
  --line:      #D9D3C6;
  --line-soft: #E9E4DA;

  /* ---- Type families & scale ---- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;   /* display, headlines, wordmark */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* UI, body */
  --fs-display: 56px; --fs-h1: 40px; --fs-h2: 28px; --fs-h3: 21px;
  --fs-body: 16px; --fs-small: 13px; --fs-tiny: 11px;

  /* ---- Spacing ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- Radii ---- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;

  /* ---- Shadow ---- */
  --shadow-sm:0 1px 2px rgba(26,26,26,.04);
  --shadow-md:0 4px 16px rgba(26,26,26,.06);
  --shadow-lg:0 12px 40px rgba(26,26,26,.08);
}