/* theme-dobletilde-tinta.css — Dobletilde Tinta, the product theme (Spec-0151), the default.
 * Loaded after styles/themes/default.css so these overrides win.
 *
 * THEME ONLY, same rule as theme-quento.css: @font-face declarations and the
 * `@layer wa-theme` token block. Layout, sizing, resets and @media go in app.css.
 *
 * A port of the Dense UI type system: Inter for body and headings, IBM Plex Mono
 * for code and identifiers, a deep navy brand ramp against warm-neutral paper in light
 * and cool near-black in dark. Success/warning/danger are ported too — desaturated
 * versions of Web Awesome's defaults, so a screen that is mostly status chips
 * reads as one surface rather than a set of signals competing with the chrome.
 */

/* Inter — vendored under assets/static/fonts/inter/. One variable woff2 per
 * subset covers weights 100–900 AND the optical-size axis (opsz 14–32), which
 * `font-optical-sizing: auto` drives: spacing tightens as size grows, so
 * headings need no hand-applied tracking. unicode-range copied from Google. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono — static weights 400 and 600, under assets/static/fonts/ibm-plex-mono/.
 * No variable build exists, so each weight is its own file. 600 is what prices and
 * SKUs need to sit above regular in a table. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Dobletilde Tinta — layered on top of the WA base. Selected when
 * <html class="wa-theme-dobletilde-tinta">. Other theme classes bypass this block.
 *
 * Ramps and typography are mode-independent and live on the theme class.
 * Surfaces and text differ between modes, so they live in the mode-scoped
 * blocks below — and they are set EXPLICITLY rather than derived from the
 * neutral ramp, because the two modes are deliberately not the same neutral:
 * light is warm-biased paper, dark is a cool near-black. One ramp cannot
 * carry both, and the base theme derives dark surfaces from neutral-05/10/20. */
@layer wa-theme {
  .wa-theme-dobletilde-tinta {
    /* Brand — deep navy. Anchored at 40, which is what --wa-color-text-link
     * resolves to in light mode; 70 is the dark-mode link and is lifted to stay
     * legible on a near-black ground. The one saturated thing on the page. */
    --wa-color-brand-05: oklch(16% 0.045 255);
    --wa-color-brand-10: oklch(21% 0.062 255);
    --wa-color-brand-20: oklch(27% 0.085 255);
    --wa-color-brand-30: oklch(33% 0.105 255);
    --wa-color-brand-40: oklch(38% 0.118 255);
    --wa-color-brand-50: oklch(47% 0.130 255);
    --wa-color-brand-60: oklch(62% 0.120 255);
    --wa-color-brand-70: oklch(72% 0.095 255);
    --wa-color-brand-80: oklch(82% 0.065 255);
    --wa-color-brand-90: oklch(90% 0.038 255);
    --wa-color-brand-95: oklch(95% 0.018 255);

    /* Neutral — barely warm, the paper the light mode is printed on. Chroma is
     * low enough to read as grey and high enough not to read as unconsidered. */
    --wa-color-neutral-05: oklch(17% 0.005 80);
    --wa-color-neutral-10: oklch(24% 0.005 80);
    --wa-color-neutral-20: oklch(33% 0.005 80);
    --wa-color-neutral-30: oklch(43% 0.005 80);
    --wa-color-neutral-40: oklch(53% 0.006 80);
    --wa-color-neutral-50: oklch(62% 0.006 80);
    --wa-color-neutral-60: oklch(70% 0.006 80);
    --wa-color-neutral-70: oklch(79% 0.006 85);
    --wa-color-neutral-80: oklch(87% 0.007 85);
    --wa-color-neutral-90: oklch(92% 0.008 88);
    --wa-color-neutral-95: oklch(96% 0.006 88);

    /* Success — muted green. */
    --wa-color-success-05: oklch(20% 0.045 152);
    --wa-color-success-10: oklch(26% 0.060 152);
    --wa-color-success-20: oklch(33% 0.075 152);
    --wa-color-success-30: oklch(40% 0.086 152);
    --wa-color-success-40: oklch(48% 0.095 152);
    --wa-color-success-50: oklch(56% 0.093 152);
    --wa-color-success-60: oklch(64% 0.086 152);
    --wa-color-success-70: oklch(72% 0.075 152);
    --wa-color-success-80: oklch(82% 0.055 152);
    --wa-color-success-90: oklch(90% 0.032 152);
    --wa-color-success-95: oklch(95% 0.016 152);

    /* Warning — ochre rather than amber; the Quento theme owns amber. */
    --wa-color-warning-05: oklch(21% 0.040 76);
    --wa-color-warning-10: oklch(27% 0.055 76);
    --wa-color-warning-20: oklch(34% 0.070 76);
    --wa-color-warning-30: oklch(42% 0.085 76);
    --wa-color-warning-40: oklch(50% 0.095 76);
    --wa-color-warning-50: oklch(58% 0.098 76);
    --wa-color-warning-60: oklch(66% 0.098 78);
    --wa-color-warning-70: oklch(74% 0.093 80);
    --wa-color-warning-80: oklch(83% 0.070 82);
    --wa-color-warning-90: oklch(91% 0.042 84);
    --wa-color-warning-95: oklch(96% 0.020 86);

    /* Danger — brick, not fire-engine. */
    --wa-color-danger-05: oklch(19% 0.055 30);
    --wa-color-danger-10: oklch(25% 0.075 30);
    --wa-color-danger-20: oklch(32% 0.098 30);
    --wa-color-danger-30: oklch(38% 0.115 30);
    --wa-color-danger-40: oklch(45% 0.125 30);
    --wa-color-danger-50: oklch(53% 0.122 30);
    --wa-color-danger-60: oklch(62% 0.105 30);
    --wa-color-danger-70: oklch(70% 0.085 30);
    --wa-color-danger-80: oklch(80% 0.060 30);
    --wa-color-danger-90: oklch(89% 0.035 30);
    --wa-color-danger-95: oklch(95% 0.017 30);

    /* Typography — Inter for prose, UI and every figure (tabular digits align
     * a column of prices on their own), IBM Plex Mono for identifiers only: SKUs,
     * codes, order numbers. The two families must differ: catalog_e2e_test.go
     * and numbers_face_e2e_test.go read both tokens and fail if they match. */
    --wa-font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wa-font-family-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wa-font-family-code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --wa-font-weight-heading: 600;
    --wa-font-weight-body: 400;

    /* Density — 14px base instead of 16. The whole --wa-font-size-* ladder is
     * derived from -m, so this one knob moves every step with it: 14 base,
     * 12 dense, 11 label, 18 panel title, 23 page title. An operator console
     * trades a little reading comfort for rows on screen; 14/12 is where that
     * stops costing legibility. Spacing is NOT scaled with it — rows get tighter
     * type, not tighter padding. */
    --wa-font-size-scale: 0.875;
    --wa-space-scale: 1;

    /* 1.6 is a reading measure, too loose for a table row. */
    --wa-line-height-normal: 1.5;

    /* Near the specimen's 3–5px: s ≈ 3px, m ≈ 5px, l ≈ 10px. */
    --wa-border-radius-scale: 0.85;
  }

  /* Light — warm-neutral paper, white for raised surfaces so a card reads as
   * lifted off the page rather than merely outlined. */
  .wa-theme-dobletilde-tinta.wa-light {
    --wa-color-surface-default: oklch(98.5% 0.003 90);
    --wa-color-surface-raised: oklch(100% 0 0);
    --wa-color-surface-lowered: oklch(95.5% 0.006 90);
    --wa-color-surface-border: oklch(90.5% 0.008 90);

    --wa-color-text-normal: oklch(20% 0.006 270);
    --wa-color-text-quiet: oklch(52% 0.012 265);
  }

  /* Dark — cool near-black. Deliberately not the warm neutral above: a warm
   * dark reads as brown at these lightnesses.
   *
   * Tuned 2026-09-16 after the owner found the first cut hard to read: the
   * quiet text and the card/page separation were at the WCAG floor but not
   * above it in practice — 11–12px Inter at 400 on a near-black ground needs
   * more light than the ratio suggests. Raised surfaces and borders step up so
   * a card reads as a card; quiet text goes from 66% to 73%; body text to 95%. */
  .wa-theme-dobletilde-tinta.wa-dark {
    --wa-color-surface-default: oklch(17.5% 0.005 265);
    --wa-color-surface-raised: oklch(23.5% 0.007 265);
    --wa-color-surface-lowered: oklch(13.5% 0.005 265);
    --wa-color-surface-border: oklch(33% 0.010 265);

    --wa-color-text-normal: oklch(95% 0.004 90);
    --wa-color-text-quiet: oklch(73% 0.012 265);

    /* The quiet tier of every semantic ramp, where Web Awesome's dark defaults
     * land on the ramp's 10 for the fill and 60 for the text. With these
     * desaturated ramps that is a muddy mid-dark fill (ochre-10 reads as brown)
     * under text at 64–66%. The type system's dark callout is a near-black tint
     * under a light-toned ink (ochre-bg #231D10 / ochre #CFA452): fill from 05,
     * text from 70. Border stays where the base puts it (20). Brand keeps its
     * fill at 10: that tint is the outgoing chat bubble, sitting on the lowered
     * surface, and at 05 it vanished into the pane. */
    --wa-color-brand-on-quiet: var(--wa-color-brand-70);
    --wa-color-success-fill-quiet: var(--wa-color-success-05);
    --wa-color-success-on-quiet: var(--wa-color-success-70);
    --wa-color-warning-fill-quiet: var(--wa-color-warning-05);
    --wa-color-warning-on-quiet: var(--wa-color-warning-70);
    --wa-color-danger-fill-quiet: var(--wa-color-danger-05);
    --wa-color-danger-on-quiet: var(--wa-color-danger-70);

    /* Light strokes bloom against a dark ground: body text set at 400 reads
     * thinner and slightly blurred. Half a step back, same sizes. */
    --wa-font-weight-body: 450;
  }
}