/* ============================================================
   Dromos — design tokens (v2, true-white reset)
   Replaces the warm-stone palette of colors_and_type.css.
   ------------------------------------------------------------
   Principles:
     • Background is true white.
     • Neutrals are cool, not warm — gray scale tuned for
       enterprise polish, not editorial warmth.
     • Terracotta is reserved. ≤8% of any surface.
     • Type is sans-led with a serif counter-voice.
     • Spacing is on a 4px grid. Density scales via --density.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     SURFACES — true white, four steps of cool gray
     -------------------------------------------------------- */
  --bg:          #ffffff;
  --bg-subtle:   #fafafa;  /* alternate row, footer */
  --bg-sunk:     #f4f4f5;  /* code blocks, kbd, quiet panels */
  --bg-hover:    #f7f7f8;

  /* --------------------------------------------------------
     INK — near-black, with a measured cool gray ramp
     -------------------------------------------------------- */
  --ink:         #0a0a0a;  /* primary text */
  --ink-strong:  #000000;  /* display, hairline emphasis only */
  --ink-700:     #27272a;  /* body strong */
  --ink-500:     #52525b;  /* secondary / meta */
  --ink-400:     #71717a;  /* tertiary */
  --ink-300:     #a1a1aa;  /* placeholder / disabled */
  --ink-200:     #d4d4d8;  /* strong borders */
  --ink-100:     #e4e4e7;  /* default borders, hairlines */
  --ink-50:      #f4f4f5;  /* table zebra */

  /* --------------------------------------------------------
     ACCENT — terracotta. Locked. Use sparingly.
     -------------------------------------------------------- */
  --accent:        #d97757;
  --accent-hover:  #c5644a;
  --accent-soft:   #fdf0ea;  /* tinted background */
  --accent-edge:   #f0c7b3;
  --accent-ring:   rgba(217, 119, 87, 0.20);

  /* --------------------------------------------------------
     SEMANTIC STATUS — for product chrome, not marketing
     -------------------------------------------------------- */
  --ok:       #15803d;
  --ok-soft:  #ecfdf5;
  --ok-edge:  #a7f3d0;
  --warn:     #b45309;
  --warn-soft:#fffbeb;
  --warn-edge:#fde68a;
  --bad:      #b91c1c;
  --bad-soft: #fef2f2;
  --bad-edge: #fecaca;
  --info:     #1d4ed8;
  --info-soft:#eff6ff;
  --info-edge:#bfdbfe;

  /* --------------------------------------------------------
     TYPE
     -------------------------------------------------------- */
  --font-serif: "Source Serif 4", "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Type scale — modular, optimized for desktop marketing */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  80px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-cap:    0.18em;

  /* --------------------------------------------------------
     SPACING — 4px grid, scales with --density
     density: 0.85 compact · 1 regular · 1.25 airy
     -------------------------------------------------------- */
  --density: 1;
  --s-1:  calc(4px  * var(--density));
  --s-2:  calc(8px  * var(--density));
  --s-3:  calc(12px * var(--density));
  --s-4:  calc(16px * var(--density));
  --s-5:  calc(24px * var(--density));
  --s-6:  calc(32px * var(--density));
  --s-7:  calc(48px * var(--density));
  --s-8:  calc(64px * var(--density));
  --s-9:  calc(96px * var(--density));
  --s-10: calc(128px * var(--density));

  /* Section vertical rhythm */
  --section-y: calc(96px * var(--density));

  /* --------------------------------------------------------
     RADII — restrained
     -------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* --------------------------------------------------------
     SHADOWS — very light, enterprise restraint
     -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);

  /* --------------------------------------------------------
     LAYOUT
     -------------------------------------------------------- */
  --container-max: 1240px;
  --container-pad: 32px;
  --nav-height:    64px;

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* ============================================================
   Base reset — applied wherever this file is imported.
   Kept narrow on purpose; component CSS lives elsewhere.
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--ink); }