/* A venture's own look, in place of look.css. It turns the identity the page declares into the tokens
   base.css reads, and it has no color, face or radius of its own: a page that declares none shows the
   browser's defaults, never the kit's cream.

   The page declares, in a <style> of its own (identity.json is the source, the same values):
     :root   --id-bg --id-surface --id-ink --id-ink-2 --id-brand --id-brand-ink --id-accent --id-brand-text
             --id-dark-bg --id-dark-surface --id-dark-ink --id-dark-ink-2 --id-dark-brand --id-dark-brand-text
             --id-font-display --id-font-body --id-font-mono (a quoted family name each; mono is optional)
             --id-radius (a length)
     <html>  data-layout (read by layouts/<layout>.css), data-scale (tight|standard|dramatic),
             data-border (none|hairline|heavy), data-shadow (none|soft|hard),
             data-texture (none|grain|grid|dots|stripes)
   An attribute left off reads as its first value: standard, none, none, none. Link order: library.css,
   base.css, identity.css, layouts/<layout>.css. Dark follows the system, or data-theme on <html>. */

:root {
  --bg: var(--id-bg); --surface: var(--id-surface); --ink: var(--id-ink); --ink-2: var(--id-ink-2);
  --brand: var(--id-brand); --brand-ink: var(--id-brand-ink); --accent: var(--id-accent);
  --brand-text: var(--id-brand-text);
  --surface-2: color-mix(in oklab, var(--surface) 88%, var(--ink));
  --line: color-mix(in oklab, var(--ink) 18%, var(--bg));
  --line-strong: color-mix(in oklab, var(--ink) 55%, var(--bg));
  --brand-soft: color-mix(in oklab, var(--brand) 14%, var(--bg));

  /* Feedback: the kit's measured set, since a hit, a near and a miss also carry a glyph and a pattern. */
  --hit: #0e8f7e; --hit-ink: #ffffff; --near: #e8892b; --near-ink: #1d1206; --miss: #d9d6ce; --miss-ink: #3b3e45;

  --font-display: var(--id-font-display), ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--id-font-body), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--id-font-mono, ui-monospace), "SF Mono", Menlo, Consolas, monospace;
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.7vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 4rem);

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --radius-s: calc(var(--id-radius) * 0.6); --radius: var(--id-radius); --radius-l: calc(var(--id-radius) * 1.5);
  --pill: calc(var(--id-radius) * 2);
  --shadow-1: none; --shadow-2: none; --shadow-3: none;
  --max: 72rem;
  --narrow: 40rem;
  color-scheme: light dark;
}

/* Dark follows the system unless the page sets data-theme on <html> (Kit.theme does); the same values
   are written twice, as in look.css. The ink on the brand fill stays the light one, so a dark brand
   keeps 4.5:1 against it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--id-dark-bg); --surface: var(--id-dark-surface); --ink: var(--id-dark-ink); --ink-2: var(--id-dark-ink-2);
    --brand: var(--id-dark-brand); --brand-text: var(--id-dark-brand-text);
    --hit: #19a893; --near: #f09a45; --miss: #3a3d45; --miss-ink: #d6d7db;
  }
}
:root[data-theme="dark"] {
  --bg: var(--id-dark-bg); --surface: var(--id-dark-surface); --ink: var(--id-dark-ink); --ink-2: var(--id-dark-ink-2);
  --brand: var(--id-dark-brand); --brand-text: var(--id-dark-brand-text);
  --hit: #19a893; --near: #f09a45; --miss: #3a3d45; --miss-ink: #d6d7db;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Type scale: standard is the base above; tight and dramatic move the large steps. */
html[data-scale="tight"] { --step-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem); --step-4: clamp(1.9rem, 1.5rem + 2vw, 3rem); }
html[data-scale="dramatic"] { --step-3: clamp(2.1rem, 1.5rem + 2.6vw, 3.8rem); --step-4: clamp(2.8rem, 1.7rem + 5.5vw, 6.5rem); }

/* Borders. Inputs and buttons keep a visible edge whatever the setting: that edge is what a visitor
   finds a control by. */
.input, .seg, .btn:not(.btn-primary):not(.btn-ghost) { border-color: var(--line-strong); }
html[data-border="none"] :is(.card, .notice, .preview, .file-list li, .order li, .suggest-list) { border-color: transparent; }
html[data-border="heavy"] :is(.card, .notice, .preview, .file-list li, .order li, .suggest-list, .btn:not(.btn-ghost), .input, .seg, .dropzone) { border-width: 3px; border-color: var(--ink); }
html[data-border="heavy"] .site-header { border-bottom-width: 3px; border-bottom-color: var(--ink); }
html[data-border="heavy"] body > footer { border-top-width: 3px; border-top-color: var(--ink); }

/* Shadows: soft is a blurred lift, hard is an offset block in the ink. */
html[data-shadow="soft"] {
  --shadow-1: 0 1px 2px rgb(20 20 30 / 0.07), 0 1px 1px rgb(20 20 30 / 0.05);
  --shadow-2: 0 2px 6px rgb(20 20 30 / 0.07), 0 10px 30px -10px rgb(20 20 30 / 0.2);
  --shadow-3: 0 4px 12px rgb(20 20 30 / 0.09), 0 30px 60px -20px rgb(20 20 30 / 0.32);
}
html[data-shadow="hard"] { --shadow-1: 3px 3px 0 var(--ink); --shadow-2: 5px 5px 0 var(--ink); --shadow-3: 8px 8px 0 var(--ink); }
html[data-shadow="hard"] .btn:hover { transform: translate(-1px, -1px); }
html[data-shadow="hard"] .btn-primary { box-shadow: var(--shadow-1); }
html[data-shadow="none"] .btn-primary { box-shadow: none; }

/* Textures sit on the page background only, in the ink's own color at low strength, so text keeps its
   contrast: every layer is drawn from tokens or inline SVG and needs no request. */
html[data-texture="grain"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-texture="grid"] body {
  background-image: linear-gradient(color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
html[data-texture="dots"] body {
  background-image: radial-gradient(color-mix(in oklab, var(--ink) 14%, transparent) 1.2px, transparent 1.4px);
  background-size: 20px 20px;
}
html[data-texture="stripes"] body {
  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ink) 6%, transparent) 0 2px, transparent 2px 14px);
}