/* ===========================================================================
   Commonplace House Style — design/maeda
   Drop-in runtime layer: design tokens (light + true-dark inversion),
   base element styles, and the three brand motifs.

   Usage:
     1. Copy this file and the sibling /fonts directory into your project.
     2. @import "./commonplace.css";  (or add to your bundler entry)
     3. Toggle dark mode by adding class "theme-dark" (or "dark") to <html>.

   Tokens are shadcn/ui-compatible: --background, --foreground, --primary,
   --border, --ring, --destructive, --muted, --accent, chart + sidebar tokens
   all resolve from the five raw primitives below. Override the five and the
   whole system follows.
   =========================================================================== */

/* ---- Typeface (self-hosted, SIL OFL) ---- */
/* Place the eight .woff2 files in ../fonts relative to this stylesheet.
   Four weights, each a Leroy pen: 400 pen 00, 500 pen 0, 600 pen 1, 700 pen 3
   (DR-027). Nothing off that set — 100/200/300/800/900 are not cut and must
   not be declared; they would synthesise.
   On macOS/iOS native clients, use SF Pro / SF Mono instead (see HOUSE_STYLE). */
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commonplace Gothic';
  src: url('../fonts/CommonplaceGothic-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* === The five raw primitives — everything flows from here === */
  --white:   #ffffff;
  --gray-20: #d6d6d6;  /* hairlines, borders */
  --gray-50: #6f6f6f;  /* muted text, dividers — WCAG AA 4.5:1 on white */
  --gray-90: #1a1a1a;  /* body text */
  --black:   #000000;  /* primary text, emphasis, action */

  /* === Semantic aliases === */
  --text-color:   var(--black);
  --bg-color:     var(--white);
  --border-color: var(--gray-20);
  --border-strong: var(--gray-50);          /* a control's boundary — clears 3:1 (§17) */
  --text-light:   var(--gray-50);

  /* === Functional safety signal — the ONLY permitted hue === */
  --danger: #c0362c;  /* destructive / irreversible actions only */

  /* === Type === */
  --font-sans: 'Commonplace Gothic', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: var(--font-sans);            /* deliberately identical */
  --text-base: 17px;                        /* reading base */
  --leading-prose: 1.55;
  --measure: 680px;                         /* reading column cap */
  --tracking-tight: -0.015em;               /* headings */
  --tracking-chrome: 0.07em;                /* uppercase UI labels */

  /* === Rhythm / spacing ===
     NOTE — do not reintroduce `--spacing`. Tailwind v4 derives its entire
     numeric scale from that name (`w-7` is `calc(var(--spacing) * 7)`,
     default 0.25rem), so declaring it here silently rescaled every v4
     consumer by 4x. The legacy rem trio it belonged to (--spacing 1rem /
     -lg 2.5rem / -xl 6rem) was an alias of --space-lg / -2xl / -3xl that
     nothing in the fleet ever read. Removed at v2.2.0; DR-020, issue #89. */
  --space-xxs: 2px;  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px;
  --space-lg: 16px;  --space-xl: 24px; --space-2xl: 40px; --space-3xl: 96px;
  --container-pad: 1.5rem;                   /* container side padding */
  --max-width: 880px;                        /* web page cap (reading col stays --measure) */

  /* === The editor frame (§18) — four surfaces, one dimension used twice ===
     --frame-bar is BOTH the top nav's height and the toolbar's width, so the
     two hairlines meet in a square at the top-left and the frame reads as one
     object. Drafter and Modeler each arrived at 48/48 independently; the panel
     width is the one number this section had to pick (they had 232, 280, 300). */
  --frame-bar: 48px;                         /* nav height AND toolbar width */
  --frame-panel: 280px;                      /* settings panel width */
  --frame-footer: 24px;                      /* footer bar height — one compact row */
  --frame-float: 8px;                        /* floating frame: gap off the window edge and between surfaces (DR-037) */

  /* === Shape & motion === */
  --radius: 0;                              /* flat & square; full=9999px only for circles */
  --hairline: 1px;
  --shadow: none;
  --transition: color 0.15s linear, opacity 0.15s linear;

  /* === Line-weight grammar (one stroke hierarchy, chrome + the work) === */
  --rule-hair:   1px;                        /* dividers, hairlines */
  --rule-object: 1.5px;                      /* object outlines */
  --rule-frame:  2px;                        /* frames, titleblocks */

  /* === The work supplies the colour: neutral (non-hue) ground behind the
     user's work, in every app — chrome stays --bg-color (§9a, DR-026) === */
  --bg-canvas: #e6e6e6;                      /* grey ground so the work reads; still not a colour */

  /* === The one admitted hue for the user's own marks: a text selection, and
     construction geometry — nothing else (§2, amended 2026-09-14) ===
     Theme-invariant as a selection field: the same blue on either ground; its
     ink is fixed black rather than --text-color, which would invert to
     near-white in dark and leave 1.6:1 on the field. A construction LINE in a
     document view draws --construction, the same blue deepened on the light
     field (§19, amended 2026-09-25). */
  --selection:     #9cd2ec;
  --selection-ink: #000000;

  /* === Document views (§19, DR-025) =========================================
     Functional colour ON the work, never chrome. The canvas selection is what
     the interface reports as selected (not --selection, the user's own mark).
     It has PRIORITY on the work (§19, 2026-10-01): the most vivid colour in an
     ink-and-paper view, so its pairs are measured and pinned by test, not held
     to the floor, and a colour that sits near it carries a second channel;
     --construction is the user's construction line, --selection deepened on
     the light field so it clears 3:1 there; the axis triple is one R/G/B for
     every editor, Okabe-Ito hues tuned per theme (DR-031, v4.2.0), held apart
     from each other and from the §2 blue under normal, protan, deutan and
     tritan simulation by test (X may share --danger's hue family, so danger on
     the work carries a glyph); the minor grid is an ink fraction, so it reads
     the same on the grey field and on white paper. */
  --canvas-selection: #2687c7;
  --construction: #0f68a2;
  --axis-x: #b5450c;
  --axis-y: #10966b;
  --axis-z: #3628c6;
  --grid-minor: color-mix(in srgb, var(--text-color) 16%, transparent);

  /* === Colour by entity and ramps (§19, DR-031 Phase 1b) ======================
     Identity, not meaning, and never chrome. --cat-1 … --cat-8 are Petroff's
     ten-colour sequence with its two greys dropped and its order kept, re-lit
     per theme so a 1px line clears 3:1 on field and paper; by test they stay
     0.08 (OKLab) apart, and apart from ink and --gray-50, under normal, protan,
     deutan and tritan simulation. Assigned by index; past eight a colour repeats
     with a second channel. --cat-green is ACI 3's equivalent in the display-only
     ACI remap (§19), not an index. --ramp-seq-* is cividis (theme-invariant, a
     fill); --ramp-div-* runs blue → vermillion through the ground's neutral at
     stop 5. A ramp never carries a threshold alone. */
  --cat-1: #1d69a8;
  --cat-2: #945e00;
  --cat-3: #4c0000;
  --cat-4: #4e0373;
  --cat-5: #652717;
  --cat-6: #863b09;
  --cat-7: #92834e;
  --cat-8: #1b90a5;
  --cat-green: #0d604a;
  --ramp-seq-1: #00224e;
  --ramp-seq-2: #1a386f;
  --ramp-seq-3: #434e6c;
  --ramp-seq-4: #61656f;
  --ramp-seq-5: #7d7c78;
  --ramp-seq-6: #9b9476;
  --ramp-seq-7: #bcae6c;
  --ramp-seq-8: #dec958;
  --ramp-seq-9: #fee838;
  --ramp-div-1: #075789;
  --ramp-div-2: #317cb4;
  --ramp-div-3: #6da1ce;
  --ramp-div-4: #a7c7e3;
  --ramp-div-5: #ebebeb;
  --ramp-div-6: #e1b8a7;
  --ramp-div-7: #c98a6e;
  --ramp-div-8: #ac5e38;
  --ramp-div-9: #813c18;

  /* === The modal scrim — the second thing that deliberately does not invert ===
     A scrim is physical dimming, not a colour: it darkens whatever is beneath
     it on either ground. Derive one from --text-color and it flips with the
     theme, so dark mode *lightens* the page the modal is meant to push back.
     Named here because all three U3 consumers hit this independently and each
     hard-coded its own black (DR-021). */
  --scrim: rgb(0 0 0 / 0.5);

  /* === Stacking order (DR-024) ===============================================
     Which surface is drawn on top, and therefore which one takes the clicks.
     Named here because the library wrote its own numbers (a menu at 50, a
     dialog at 100) and every product wrote its own above them, so nobody
     stated the ORDER: Drafter's consent notice at 1000 sat on top of the
     command palette at 50 and ate the clicks on its lower rows.

     The one ruling in the scale: a surface the drafter SUMMONED outranks one
     that merely informs them, and a modal outranks both because it is the one
     waiting for an answer. Values are Drafter's, adopted rather than invented,
     and the gaps are deliberate — an app can sit a surface of its own between
     two rungs without renumbering anything. */
  --layer-notice:  1000;                    /* a banner or consent bar, asking nothing */
  --layer-overlay: 1050;                    /* a menu, a palette, a popover — summoned */
  --layer-tooltip: 1060;                    /* clears the overlay it describes */
  --layer-dialog:  1100;                    /* a modal (native showModal() outranks all) */
  --layer-page:    1200;                    /* a full-bleed screen */

  /* === Pressed-in-monochrome SELECTED-ROW state (a list row, not a text run) === */
  --active-bg:     color-mix(in srgb, var(--text-color) 10%, transparent);
  --active-border: var(--gray-50);

  /* === shadcn/ui-compatible token surface (all monochrome) === */
  --background: var(--bg-color);
  --foreground: var(--text-color);
  --card: var(--bg-color);
  --card-foreground: var(--text-color);
  --popover: var(--bg-color);
  --popover-foreground: var(--text-color);
  --primary: var(--text-color);            /* ink, never blue */
  --primary-foreground: var(--bg-color);
  --secondary: var(--bg-color);
  --secondary-foreground: var(--text-color);
  --muted: var(--bg-color);
  --muted-foreground: var(--text-light);
  --accent: color-mix(in srgb, var(--text-color) 7%, transparent);  /* 7% ink wash */
  --accent-foreground: var(--text-color);
  --destructive: var(--danger);
  --destructive-foreground: #ffffff;
  --border: var(--border-color);
  --input: var(--border-color);
  --ring: var(--text-color);

  /* monochrome data-viz ramp */
  --chart-1: var(--black);
  --chart-2: var(--gray-90);
  --chart-3: var(--gray-50);
  --chart-4: var(--gray-20);
  --chart-5: var(--gray-90);

  /* sidebar (same inversion logic) */
  --sidebar: var(--bg-color);
  --sidebar-foreground: var(--text-color);
  --sidebar-primary: var(--text-color);
  --sidebar-primary-foreground: var(--bg-color);
  --sidebar-accent: color-mix(in srgb, var(--text-color) 7%, transparent);
  --sidebar-accent-foreground: var(--text-color);
  --sidebar-border: var(--border-color);
  --sidebar-ring: var(--text-color);
}

/* === True dark inversion: swap the five primitives, everything follows ===
   Three states, not two (§17): an explicit `theme-dark` / `theme-light`, or
   `theme-auto` to follow the OS. Adding `theme-auto` to <html> is opt-in on
   purpose — an app that already persists a choice keeps its behaviour, and one
   that adds the class gets `prefers-color-scheme` for free. An explicit choice
   always beats the OS, in both directions. */
@media (prefers-color-scheme: dark) {
  html.theme-auto:not(.theme-light):not([data-theme='light']) {
    --white:   #0d0d0d;
    --gray-20: #2a2a2a;
    --gray-50: #8b8b8b;
    --gray-90: #d4d4d4;
    --black:   #f0f0f0;
    --danger:  #e0554b;
    --bg-canvas: #1a1a1a;
    --canvas-selection: #35b5ff;
    --construction: #9cd2ec;
    --axis-x: #ed683e;
    --axis-y: #44ffbc;
    --axis-z: #5e81e7;
    --cat-1: #428cd4;
    --cat-2: #ffb512;
    --cat-3: #c12e11;
    --cat-4: #903cc7;
    --cat-5: #bb7550;
    --cat-6: #fa811f;
    --cat-7: #d9d095;
    --cat-8: #92dadd;
    --cat-green: #3abd90;
    --ramp-div-1: #90cbfd;
    --ramp-div-2: #5ba4df;
    --ramp-div-3: #497ca7;
    --ramp-div-4: #3a5770;
    --ramp-div-5: #333333;
    --ramp-div-6: #6d4b3b;
    --ramp-div-7: #a2674c;
    --ramp-div-8: #d7855f;
    --ramp-div-9: #f8b191;
  }
}

html.theme-dark, html.dark, [data-theme='dark'], .dark {
  --white:   #0d0d0d;
  --gray-20: #2a2a2a;
  --gray-50: #8b8b8b;
  --gray-90: #d4d4d4;
  --black:   #f0f0f0;
  --danger:  #e0554b;
  --bg-canvas: #1a1a1a;                      /* dark canvas ground */
  --canvas-selection: #35b5ff;
  --construction: #9cd2ec;
  --axis-x: #ed683e;
  --axis-y: #44ffbc;
  --axis-z: #5e81e7;
  --cat-1: #428cd4;
  --cat-2: #ffb512;
  --cat-3: #c12e11;
  --cat-4: #903cc7;
  --cat-5: #bb7550;
  --cat-6: #fa811f;
  --cat-7: #d9d095;
  --cat-8: #92dadd;
  --cat-green: #3abd90;
  --ramp-div-1: #90cbfd;
  --ramp-div-2: #5ba4df;
  --ramp-div-3: #497ca7;
  --ramp-div-4: #3a5770;
  --ramp-div-5: #333333;
  --ramp-div-6: #6d4b3b;
  --ramp-div-7: #a2674c;
  --ramp-div-8: #d7855f;
  --ramp-div-9: #f8b191;
}

/* ===========================================================================
   Base element styles
   =========================================================================== */
* { border-radius: var(--radius); box-shadow: var(--shadow); }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-prose);
  color: var(--text-color);
  background: var(--bg-color);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}
a:hover { opacity: 0.5; }            /* recede, never light up */

hr { border: 0; border-top: var(--hairline) solid var(--border-color); }

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

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--ring);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-20); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-50); }

html { scroll-behavior: smooth; }

/* Dark-mode content images sit against near-black without blasting */
html.theme-dark img:not([role='icon']),
html.dark img:not([role='icon']),
[data-theme='dark'] img:not([role='icon']) { filter: brightness(0.92); }
@media (prefers-color-scheme: dark) {
  html.theme-auto:not(.theme-light):not([data-theme='light']) img:not([role='icon']) { filter: brightness(0.92); }
}

/* Visually hidden, still announced. The house says status in words rather than
   hue (§2), so a word a sighted reader gets from position sometimes has to be
   said out loud for everyone else. Not `display: none` — that removes it from
   the accessibility tree too. (§17) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The motion law is already quiet — colour and opacity only (§4) — but quiet is
   not none: a reader who asks the OS for less motion gets none of ours. (§17) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reading column helper (≤680px) and web page cap (880px) */
.prose-measure { max-width: var(--measure); margin-inline: auto; }
.page-measure  { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--container-pad); }

/* ===========================================================================
   The three motifs — the brand's only ornament
   =========================================================================== */

/* 1. Trailing arrow on links */
.arrow-link::after {
  content: ' →';
  color: var(--text-light);
}
.arrow-link { transition: var(--transition); }
.arrow-link:hover { opacity: 0.5; }

/* Text-as-link button, uppercase + tracked, trailing arrow */
.btn-arrow {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: transparent; border: 0; padding: 0;
  font: inherit; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-color); cursor: pointer;
  transition: var(--transition);
}
.btn-arrow::after { content: '→'; color: var(--text-light); }
.btn-arrow:hover { opacity: 0.5; }
.btn-arrow:disabled { opacity: 0.5; cursor: default; }

/* 2. Asterisk section divider */
.divider-asterisk {
  text-align: center;
  padding-block: 3.5rem;
  color: var(--text-light);
}
.divider-asterisk::before {
  content: '* * *';
  letter-spacing: 0.5em;
}

/* 3. Uppercase tracked chrome labels (UI furniture) */
.label-chrome {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
  color: var(--text-light);
}
.label-chrome-sm {
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
}

/* ===========================================================================
   Panel & control primitives (1px hairline, darken-on-hover)
   =========================================================================== */
.house-panel { border: var(--hairline) solid var(--border-color); background: var(--bg-color); }
.house-panel-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-chrome); color: var(--text-light);
}
/* MIXED CASE, DELIBERATELY — do not add text-transform here. A control's label
   is the name of the value beside it, read as a word, not chrome scanned as a
   boundary; the tier shift against the uppercase .house-panel-title above it is
   what carries the hierarchy. §5's one exception to the two-tier rule; ruled
   2026-09-08 after three apps shipped three different readings (DR-021). */
.house-control-label { font-size: 0.75rem; color: var(--text-light); line-height: 1.3; }
.house-readout-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.house-rule { border-top: var(--hairline) solid var(--border-color); }
.house-control {
  border: var(--hairline) solid var(--border-color);
  background: transparent;
  transition: var(--transition);
}
.house-control:hover { border-color: var(--gray-50); }  /* darken, not lighten */

/* Pressed-in-monochrome selected state (no hue) */
.house-control[aria-selected='true'],
.house-control.is-active {
  background: var(--active-bg);
  border-color: var(--active-border);
}

/* Active nav reads as an underline, never a colour change */
[aria-current='page'] { text-decoration: underline; text-underline-offset: 4px; }

/* Titleblock furniture (drafting surfaces) */
.house-frame       { border: var(--rule-frame) solid var(--border-color); }
.house-frame-bound { border: var(--rule-object) solid var(--border-color); }
/* A titleblock cell stacks its label OVER its value — the component's whole
   shape. The two spans carried no `display`, so they rendered side by side on
   one line and every consumer of TitleblockCell patched it from its own sheet
   (DR-021). The label is chrome and stays uppercase; only the control label of
   §5 is mixed case. */
.house-cell        { display: flex; flex-direction: column; gap: var(--space-xxs); border-top: var(--rule-hair) solid var(--border-color); }
.house-cell-label  { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: var(--tracking-chrome); color: var(--text-light); }
.house-cell-value  { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }