/* ---------------------------------------------------------------------------
   tokens.css — DNC Blog brand tokens as CSS custom properties.
   Drop into src/styles/tokens.css and import once from your Astro layout:
       import '../styles/tokens.css';
   These mirror tailwind.config.mjs so you can use either layer.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Lovelo Line Bold";
  src: url("../fonts/Lovelo_Line_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color ── */
  --color-ink-50:  #f6f6f6;
  --color-ink-100: #ebebeb;
  --color-ink-200: #d4d4d4;
  --color-ink-300: #a8a8a8;
  --color-ink-400: #6e6e6e;
  --color-ink-500: #444444;
  --color-ink-600: #2b2b2b;
  --color-ink-700: #1a1a1a;
  --color-ink-800: #111111;
  --color-ink-900: #0b0b0b; /* Cod Gray 2 — brand */
  --color-ink-950: #050505;

  --color-viking-50:  #effbfd;
  --color-viking-100: #d6f4f8;
  --color-viking-200: #b1e9f1;
  --color-viking-300: #85dbe7;
  --color-viking-400: #64ccdb; /* Viking 3 — brand accent */
  --color-viking-500: #36b1c4;
  --color-viking-600: #2690a4;
  --color-viking-700: #207485;
  --color-viking-800: #1d5f6d;
  --color-viking-900: #1c4f5b;
  --color-viking-950: #0d343e;

  --color-paper:      #f8f8f8;
  --color-paper-card: #ffffff;
  --color-paper-rule: #f0f0f0;
  --color-paper-muted:#ececec;

  /* Semantic aliases — prefer these in components */
  --bg:      var(--color-paper);
  --surface: var(--color-paper-card);
  --text:    var(--color-ink-900);
  --muted:   var(--color-ink-400);
  --accent:  var(--color-viking-400);
  --border:  #e6e6e6;

  /* ── Type ──
     --font-wordmark : Lovelo Line Bold — RESERVED for the DNC logo lockup
                        only ("DNC" + "DE NORONHA CONSULTING"). Never use
                        for UI copy, headings, or running text.
     --font-sans     : Avenir — used for every headline, title, and body.
                        Hierarchy comes from WEIGHT, not family swap:
                        900 (Heavy) for hero display
                        700 (Bold)  for H1–H4 + section titles
                        400 (Book)  for body
                        300 (Light) for large lede / numerals (optional)
  */
  --font-wordmark: "Lovelo Line Bold", "Bowlby One SC",
                   system-ui, sans-serif;
  --font-sans:     "Avenir", "Avenir Next", "Nunito Sans",
                   "Helvetica Neue", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                   monospace;
  /* legacy alias — points at --font-sans now */
  --font-display:  var(--font-sans);

  --text-xs:   0.75rem;   --lh-xs:   1.25rem;
  --text-sm:   0.875rem;  --lh-sm:   1.375rem;
  --text-base: 1rem;      --lh-base: 1.625rem;
  --text-lg:   1.125rem;  --lh-lg:   1.75rem;
  --text-xl:   1.25rem;   --lh-xl:   1.875rem;
  --text-2xl:  1.5rem;    --lh-2xl:  2rem;
  --text-3xl:  1.875rem;  --lh-3xl:  2.375rem;
  --text-4xl:  2.25rem;   --lh-4xl:  2.625rem;
  --text-5xl:  3rem;      --lh-5xl:  3.25rem;
  --text-6xl:  3.75rem;   --lh-6xl:  4rem;
  --text-7xl:  4.5rem;    --lh-7xl:  4.75rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

  /* ── Spacing (4px base) ── */
  --space-px:  1px;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-25:  6.25rem;  /* article padding (from guide) */
  --space-32:  8rem;

  --gutter:        1.5rem;
  --section-y:     5rem;
  --article-pad:   6.25rem;
  --article-max:   70rem;
  --container-max: 76rem;

  /* ── Radii ── */
  --radius-xs:   2px;
  --radius-sm:   4px;     /* swatch radius from guide */
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-card: 5px 0 35px -8px #c0c0c0;        /* signature from guide */
  --shadow-soft: 0 1px 2px rgba(11,11,11,0.04),
                 0 4px 12px rgba(11,11,11,0.05);
  --shadow-lift: 0 12px 32px -12px rgba(11,11,11,0.18);
  --shadow-ring: 0 0 0 3px rgba(100,204,219,0.35);

  /* ── Motion ── */
  --ease-brand: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-brand:  200ms;
}