/*
  N/A Design System — design tokens
  https://github.com/Niiranen-Advisory/na-design-system

  This file is TWO layers in one:

  1. STRUCTURAL tokens (space scale, type-scale mechanics, radius ceiling,
     border/shadow policy, the four font ROLES) — these hold across every
     Niiranen Advisory production and should not vary per brand.
  2. The DEFAULT palette (color values, actual font stacks) — this is the
     Niiranen Advisory brand specifically. A property with its own brand
     (e.g. the Perspectives on Power Platform newsletter) loads this file
     for the structure, then a palette override file after it to replace
     only the color/font-stack values — see palettes/perspectives.css for
     the first real example. Same semantic slot names, different fill.

  STARTING VALUES — the accent color and display/text fonts below are now
  confirmed brand decisions (2026-08-31), not placeholders. Still first-pass
  and unverified: the ink/border/muted contrast pairs, the space scale
  numbers, and there is no dark mode or :focus-visible defined anywhere yet.

  Consumption:
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Niiranen-Advisory/na-design-system@latest/tokens.css">
  The Google Fonts link is required to get the real display/text faces —
  without it, --na-font-display/--na-font-text fall back to Georgia, which
  is a legible but not the intended look. Pin a version instead of @latest
  once this stabilizes, e.g. @v1.0.0. For a shadcn/Tailwind project
  (Lovable), also load adapters/shadcn.css after this (and after any
  palette override) to map these onto the variable names shadcn components
  expect.
*/

:root {
  /* ---- Color: ink & paper (light) ----
     NOT the AI-default warm cream/beige (#faf9f6-ish) — that's a named
     slop tell (impeccable.style/slop: "Cream/Beige Palette", "the default
     'tasteful' AI surface, reached for by reflex"). Paper is plain white;
     structure comes from ink and borders, not a tinted surface. */
  --na-color-bg: #ffffff;
  --na-color-bg-raised: #eeeeeb;
  --na-color-ink: #1a1a18;
  --na-color-ink-muted: #55534d;
  --na-color-border: #cfccc3;
  --na-color-border-strong: #1a1a18;
  /* Optional: display headings can take their own colour, one step off the
     body ink, for a two-tier hierarchy. Defaults to the body ink (no
     change for a brand that doesn't set it). The Licensing Guide dark
     brand points this at pure white against its off-white body. */
  --na-color-heading: var(--na-color-ink);

  /* ---- Color: one deliberate accent ---- */
  /* Confirmed 2026-08-31 — deep oxblood/rust, ~9.4:1 contrast on white
     (passes WCAG AAA for normal text). Deliberately not purple/violet or
     cyan-on-dark — both are named slop tells ("AI Color Palette"). */
  --na-color-accent: #7a2e1c;
  --na-color-accent-ink: #ffffff;

  /* ---- Color: semantic (used sparingly — callout/warning/quote only) ----
     Derived from the accent, not a second neutral cream — a tinted
     surface should read as "branded," not as the same reflexive beige
     with a different name. */
  --na-color-callout-bg: color-mix(in srgb, var(--na-color-accent) 6%, white);
  --na-color-warning-bg: color-mix(in srgb, var(--na-color-accent) 14%, white);
  --na-color-warning-border: var(--na-color-accent);

  /* Danger/destructive — kept distinct from the warning tint above, which
     is accent-branded, not a semaphore red. Needed for form/delete states
     in app-shaped properties (shadcn's --destructive maps here). */
  --na-color-danger: #b3261e;
  --na-color-danger-ink: #ffffff;

  /* ---- Color: emphasis mark ----
     The solid block with reversed text that gives weight to a key phrase
     (components.css .na-mark, DESIGN.md → Emphasis mark). Its own slot
     because the block colour is a per-brand call: the default N/A accent
     is dark enough to reverse text out of; a lighter brand accent is not,
     and points this token elsewhere (see palettes/perspectives.css, which
     uses the plum ink). */
  --na-color-mark: var(--na-color-accent);
  --na-color-mark-ink: #ffffff;

  /* ---- Color: the dark "plate" (identity surface — NOT dark mode) ----
     A deliberately-invoked near-black surface for IDENTITY: mastheads,
     an authored section break, the frame behind a social/OG image, a
     slide title. It is not a page-wide theme and is never triggered by
     prefers-color-scheme — a consumer opts a *region* in with .na-plate
     (components.css), which locally remaps --na-color-bg/ink/border/accent
     to these values so nested primitives (mark, table, figure, icon)
     adapt automatically. Flat only: no glow, no gradient, no accent
     box-shadow (all named slop tells — see DESIGN.md hard blocks).
     Established for the Licensing Guide variant, round 8 (2026-09-06);
     see palettes/licensing-guide.css and examples/licensing-guide.md.
     A palette override sets its own plate values alongside the light ones. */
  --na-color-plate-bg: #0b0b0b;
  --na-color-plate-ink: #ffffff;
  --na-color-plate-ink-muted: #a8a29a;
  --na-color-plate-border: #2c2a27;
  /* The accent, lightened just enough to clear WCAG AA on the plate
     ground — the default oxblood (#7a2e1c) is ~2.3:1 on #0b0b0b, too dark
     to use as a rule or an emphasised word there. */
  --na-color-plate-accent: #d06a4e;

  /* ---- Type: font ROLES (structural — every brand fills these four
     slots; which typeface fills each slot is palette, not structure) ---- */
  /* display: large headlines. Confirmed 2026-08-31 — DM Serif Display is
     on the common curated "AI/SaaS default" watchlist in isolation, but
     it's used here deliberately: it's the established Licensing Guide
     social-graphic identity, not a fresh reflexive pick. Same grandfather
     precedent as Perspectives' Space Grotesk (see palettes/perspectives.css).
     Requires loading the Google Font — see file header. */
  --na-font-display: "DM Serif Display", Georgia, serif;
  /* text: long-form body copy, the "someone writes for a living" face.
     Confirmed 2026-08-31 — IBM Plex Serif, same deliberate-reason note as
     display above (also the existing Licensing Guide identity). Requires
     loading the Google Font — see file header. */
  --na-font-text: "IBM Plex Serif", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  /* ui: nav, labels, small text. Left as system UI — functional, not a
     brand-carrying slot, no reason to import a webfont for it. */
  --na-font-ui: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* mono: licensing notes, product names, admin-reality fragments. Left
     as system monospace for the same reason as ui above. */
  --na-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* ---- Type: fluid scale (Utopia-style clamp, min 320px / max 1440px viewport) ---- */
  --na-text-sm: clamp(0.83rem, 0.80rem + 0.15vw, 0.9rem);
  --na-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --na-text-lg: clamp(1.2rem, 1.13rem + 0.35vw, 1.44rem);
  --na-text-xl: clamp(1.5rem, 1.36rem + 0.7vw, 2rem);
  --na-text-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --na-line-height-text: 1.55;
  --na-line-height-ui: 1.3;

  /* ---- Space: fluid scale, same methodology as type ---- */
  --na-space-2xs: clamp(0.3rem, 0.28rem + 0.1vw, 0.4rem);
  --na-space-xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.65rem);
  --na-space-sm: clamp(0.85rem, 0.78rem + 0.35vw, 1.1rem);
  --na-space-md: clamp(1.4rem, 1.25rem + 0.75vw, 1.9rem);
  --na-space-lg: clamp(2.2rem, 1.9rem + 1.5vw, 3.2rem);
  --na-space-xl: clamp(3.5rem, 2.9rem + 3vw, 5.5rem);

  /* ---- Shape: square edges, borders instead of shadows ---- */
  --na-radius: 0px;
  --na-radius-max: 4px; /* absolute ceiling — see DESIGN.md, "no rounded corners above 4px" */
  --na-border-width: 1px;
  --na-border-width-strong: 2px;
  --na-shadow: none; /* no shadows unless a functional layering need is proven */
}