/* ==========================================================================
   Dune Labs — shared design system (dune-labs.ai)
   Canonical: Portfolio-Brain/00-Substrate/design-system/dune-labs-brand-tokens.md
   The LOCKED Dune Labs brand (Route B "Contour", pack v1.0, 2026-10-26) as a
   DERIVED RENDER: every colour/font below is a tokens-note value (or an alpha of
   one). A change starts in that note — a token change is a brand change.
   Loaded alongside the Tailwind CDN (Tailwind handles in-body utilities; this
   file owns brand tokens + the shell). Introduced in S1.1.
   ========================================================================== */

/* Fonts: IBM Plex Sans (400/500/600) + IBM Plex Sans Condensed (500, labels) —
   the tokens note's web URL. Loaded here so every page gets them from one place. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour — the public site is DARK by default (founder decision, 2026-10-26): the brand's Ink-ground colourway —
     Ink ground, Paper text, Rule secondary text, Cobalt Light accent (never Cobalt on Ink); surfaces/borders are
     alphas of Paper over Ink. The internal guides set their own light/dark tokens below. */
  --dl-bg:            #141A2E;               /* Ink — page ground */
  --dl-surface:       #1D2336;               /* Paper 4% over Ink — banded sections */
  --dl-text:          #F5F2EA;               /* Paper — text (15.42:1) */
  --dl-muted:         #D9D4C7;               /* Rule — secondary text on Ink (11.66:1) */
  --dl-faint:         #D9D4C7;               /* Rule — Pencil on Ink is decorative only */
  --dl-accent:        #9DACFF;               /* Cobalt Light — the accent on Ink (8.04:1); button = Cobalt Light + Ink text */
  --dl-accent-bright: #9DACFF;
  --dl-accent-on-dark:#9DACFF;
  --dl-wash:          #222739;               /* Paper 6% over Ink — icon chips */
  --dl-border:        #343848;               /* Paper 14% over Ink — hairlines */
  --dl-border-strong: #F5F2EA;               /* Paper — outline buttons */
  --dl-glass:         rgba(245, 242, 234, 0.04);/* an alpha of Paper */

  /* Type — IBM Plex Sans is the only family; fallback Arial */
  --dl-font-body:    "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --dl-font-display: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --dl-font-label:   "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;

  /* Shape / rhythm */
  --dl-radius:       1.5rem;    /* cards / rounded-3xl */
  --dl-radius-btn:   1rem;      /* buttons / rounded-2xl */
  --dl-radius-pill:  9999px;
  --dl-maxw:         64rem;     /* ≈ max-w-5xl — nav/footer/grid measure */
  --dl-maxw-prose:   56rem;     /* ≈ max-w-4xl — text-heavy centred content */
  --dl-nav-h:        4.75rem;   /* reserved nav height (avoids inject layout shift) */
}

/* LIGHT mode (the visitor chose it with the theme button — assets/theme.js): Paper ground, Ink text, Pencil secondary,
   Cobalt accent (Paper on Cobalt for the button), Wash panels. Public pages here; the guides' light block follows. */
:root[data-theme="light"]:not([data-brand="warm"]) {
  --dl-bg: #F5F2EA; --dl-surface: #F5F2EA; --dl-text: #141A2E; --dl-muted: #5C6170; --dl-faint: #5C6170;
  --dl-accent: #2D46C8; --dl-accent-bright: #2D46C8; --dl-wash: #D7D8E5; --dl-border: #D9D4C7;
  --dl-border-strong: #141A2E; --dl-glass: rgba(20, 26, 46, 0.04);
}
/* Guide family LIGHT: Paper ground, Ink text, Pencil secondary, Cobalt accent, Wash panels. */
:root[data-brand="warm"] {
  --dl-bg: #F5F2EA; --dl-surface: #F5F2EA; --dl-text: #141A2E; --dl-muted: #5C6170; --dl-faint: #5C6170;
  --dl-accent: #2D46C8; --dl-accent-bright: #2D46C8; --dl-wash: #D7D8E5; --dl-border: #D9D4C7;
  --dl-border-strong: #141A2E; --dl-glass: rgba(20, 26, 46, 0.04);
}
/* Guide family (<html data-brand="warm"> — the attribute name is historical): the internal guides + /vision use the
   SAME locked brand, with a light/dark toggle. Light = the :root default above. Dark = the brand's Ink-ground colourway
   (Ink ground, Paper text, Rule secondary text, Cobalt Light accent); surfaces/borders are alphas of Paper over Ink
   (founder-approved 2026-10-26; the pack defines no other dark theme — never Cobalt on Ink). Mirrors the guide pages'
   own light/dark logic: explicit [data-theme="dark"] → dark; OS dark (unless the toggle forces light) → dark. */
:root[data-brand="warm"][data-theme="dark"] {
  --dl-bg: #141A2E; --dl-surface: #1D2336; --dl-text: #F5F2EA;
  --dl-muted: #D9D4C7; --dl-faint: #D9D4C7; --dl-accent: #9DACFF;
  --dl-accent-bright: #9DACFF; --dl-border: #343848; --dl-border-strong: #5C6170;
  --dl-glass: rgba(245, 242, 234, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root[data-brand="warm"]:not([data-theme="light"]) {
    --dl-bg: #141A2E; --dl-surface: #1D2336; --dl-text: #F5F2EA;
    --dl-muted: #D9D4C7; --dl-faint: #D9D4C7; --dl-accent: #9DACFF;
    --dl-accent-bright: #9DACFF; --dl-border: #343848; --dl-border-strong: #5C6170;
    --dl-glass: rgba(245, 242, 234, 0.04);
  }
}
/* the lockup that matches the ground on every page: Ink colourway (-dark) in dark mode — the default — and Paper
   colourway (-light) in light mode */
:root:not([data-theme="light"]) img.dl-logo-light { display: none !important; }
:root[data-theme="light"] img.dl-logo-dark { display: none !important; }

/* the light/dark button (assets/theme.js) — same place on every page */
.dl-theme-toggle {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  font-family: var(--dl-font-label); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.55rem 0.95rem; border-radius: var(--dl-radius-pill);
  background: var(--dl-bg); color: var(--dl-text); border: 1px solid var(--dl-border-strong); cursor: pointer;
}
.dl-theme-toggle:hover { background: var(--dl-surface); }
.dl-theme-toggle:focus-visible { outline: 2px solid var(--dl-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--dl-font-body);
  background: var(--dl-bg);
  color: var(--dl-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: var(--dl-font-display); font-weight: 600; }

.glass { background: var(--dl-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Layout helpers */
.dl-container { max-width: var(--dl-maxw); margin-inline: auto; padding-inline: 1.5rem; }
.dl-container--prose { max-width: var(--dl-maxw-prose); }
.dl-section { padding-block: 4rem; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--dl-radius-btn);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dl-btn-primary { background: var(--dl-accent); color: var(--dl-bg); }   /* Paper on Cobalt 6.65:1 */
.dl-btn-primary:hover { opacity: 0.9; }
.dl-btn-secondary { border-color: var(--dl-border-strong); color: var(--dl-text); }
.dl-btn-secondary:hover { background: var(--dl-glass); }
.dl-btn-sm { padding: 0.55rem 1.1rem; font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   4. Cards / pills
   -------------------------------------------------------------------------- */
.dl-card {
  background: var(--dl-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius);
  padding: 2rem;
}
.dl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: var(--dl-radius-pill);
  background: var(--dl-glass);
  border: 1px solid var(--dl-border);
  font-size: 0.875rem;
}
.dl-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--dl-radius-btn);
  background: var(--dl-wash);           /* Wash panel, Ink icon (12.20:1) — Cobalt stays scarce */
  color: var(--dl-text);
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   5. Site nav (injected by site.js into [data-site-nav])
   -------------------------------------------------------------------------- */
.dl-nav {
  border-bottom: 1px solid var(--dl-border);
  min-height: var(--dl-nav-h);      /* reserved so JS injection doesn't shift layout */
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--dl-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dl-nav__inner {
  max-width: var(--dl-maxw);
  margin-inline: auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dl-nav__logo { display: inline-flex; align-items: center; text-decoration: none; }
.dl-nav__logo img { height: 1.5rem; width: auto; display: block; }   /* lockup ≈ 8.8:1 → ~212px wide (min 120px) */
.dl-nav__links { display: flex; align-items: center; gap: 1.75rem; }
.dl-nav__link {
  color: var(--dl-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
.dl-nav__link:hover { color: var(--dl-text); }
.dl-nav__link--active { color: var(--dl-text); font-weight: 500; }
.dl-nav__cta { margin-left: 0.25rem; }

/* Mobile toggle button — hidden on desktop */
.dl-nav__toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--dl-text);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

/* Mobile drawer — hidden on desktop; shown when [data-open] on the nav */
.dl-nav__mobile { display: none; }

@media (max-width: 767px) {
  .dl-nav__links { display: none; }
  .dl-nav__toggle { display: inline-flex; }
  .dl-nav__mobile {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 1.5rem 1.25rem;
    border-top: 1px solid var(--dl-border);
  }
  .dl-nav[data-open="true"] .dl-nav__mobile { display: flex; }
  .dl-nav__mobile a {
    color: var(--dl-muted);
    text-decoration: none;
    padding: 0.6rem 0;
    font-size: 1rem;
  }
  .dl-nav__mobile a:hover { color: var(--dl-text); }
  .dl-nav__mobile a.dl-nav__link--active { color: var(--dl-text); font-weight: 500; }
  .dl-nav__mobile .dl-btn { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   6. Site footer (injected by site.js into [data-site-footer])
   -------------------------------------------------------------------------- */
.dl-footer {
  border-top: 1px solid var(--dl-border);
  margin-top: 4rem;
}
.dl-footer__inner {
  max-width: var(--dl-maxw);
  margin-inline: auto;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--dl-faint);
  font-size: 0.875rem;
}
.dl-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.dl-footer a { color: var(--dl-faint); text-decoration: none; transition: color 0.15s ease; }
.dl-footer a:hover { color: var(--dl-text); }
.dl-footer__social { display: flex; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   7. noscript fallback nav (shown only when JS is off)
   -------------------------------------------------------------------------- */
.dl-nav-fallback {
  border-bottom: 1px solid var(--dl-border);
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.dl-nav-fallback a { color: var(--dl-muted); text-decoration: none; font-size: 0.9rem; }
.dl-nav-fallback a:hover { color: var(--dl-text); }