/* ══════════════════════════════════════════════════════════════════════════
   THE OPERATOR PROFILE — the Abundance Alchemy skin.

   Ledger row B1 of HANDOFF-operator-profile-COMPLETION.md. Source of truth for
   type and colour: C:/Users/joyab/abundance-alchemy/brand/BRAND.md.

   HOW THIS WORKS, AND WHY IT IS AN IMPORT RATHER THAN A COPY. Every reading
   template is SHARED across Gnothia, Lindsay James and Abundance — one set of
   files, three brands, selected by `css_href` in web/brand.py. So a skin may
   never rename a class: it re-points tokens and nothing else. gnothia.css is
   almost entirely token-driven, so importing it and overriding `:root` gives
   this brand its own face while guaranteeing that every class the templates
   reference still exists and still behaves. Copying those 215 lines instead
   would drift the moment either file was touched.

   The consequence to respect: DO NOT add a rule here that changes LAYOUT.
   If a layout rule is wrong for this brand it is wrong in the template, and
   the template is shared. Colour, type and weight only.
   ══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");
/* RELATIVE, and deliberately so — both files live in web/static/css/. An absolute
   "/static/css/gnothia.css" resolves against the document ROOT, which is right on the live
   site and wrong everywhere else: under a file:// render it points at the filesystem root,
   the import silently fails, and the page comes back with type but no palette, no layout
   and no spacing. That is exactly what it did the first time, and a stylesheet that only
   works when served is a stylesheet nobody can check before shipping it. */
@import url("gnothia.css");

/* ── The palette (BRAND.md) ──────────────────────────────────────────────────
   Bone is the ground and Obsidian is the ink: the profile is a LIGHT document,
   deliberately, not the dark neutral ramp Gnothia reads on.

   Pine is the lead accent and Bronze is the second — BRAND.md's rule is one
   accent loud per surface, never both, so Bronze is held for a single emphasis
   and Pine carries links, rules and small labels.

   ⚠ BRAND.md assigns Pine to "section eyebrows". It does not get that job here.
   Brandon banned the pre-header eyebrow outright on 2026-08-16 as an AI tell —
   "headings stand alone, in every design surface" — and tests/test_operator_ask.py
   fails the build on `type-eyebrow`. The ban wins; Pine goes to links and rules
   instead. Do not "restore" eyebrows to match BRAND.md.                        */
:root {
  /* Gnothia's earth ramp, re-pointed. The names stay — they are what the shared
     rules reference — and only the values become Abundance's. */
  --earth-basalt:         #13140F;   /* Obsidian — the ink */
  --earth-wood:           #2A2B22;
  --earth-terracotta:     #3F6B62;   /* Pine — the lead accent */
  --earth-terracotta-deep:#345A52;   /* Pine, pressed */
  --earth-ochre:          #B8823A;   /* Bronze */

  /* The night surface, in Abundance's own colours rather than Gnothia's indigo. */
  --sky-night:            #13140F;
  --sky-indigo:           #1E2A26;
  --sky-indigo-line:      #2C3A35;
  --sky-dawn:             #EAE3D3;   /* Bone reads as the "dawn" note on dark */

  --light-warm:           #B8823A;   /* Bronze is the warm light on this brand */
  --light-warm-soft:      #D2A868;

  --paper:                #EAE3D3;   /* Bone — the ground */
  --paper-deep:           #E0D7C3;
  --stone-mid:            #6B6455;
  --stone-ash:            #8A8272;
  --stone-hairline:       #D2C7B2;

  --sem-affirm:           #3F6B62;   /* Pine doubles as the affirmative */
  --sem-caution:          #B8823A;
  --sem-stop:             #8E3826;
  --sem-info:             #3F6B62;

  /* ── Type (BRAND.md's locked two-tier headline strategy) ──────────────────
     Inter carries body, UI and labels. Oswald carries H1–H4.

     PRICEDOWN IS DELIBERATELY NOT LOADED, and that is not an oversight. It is
     the logo/wordmark face, and BRAND.md says plainly that it "carries its own
     web-embed licensing" and "gets hard to read below H2" — which is exactly
     why BRAND.md itself reserves it for the logo and large hero titles and
     sends everything else on web to Oswald, "a free heavy-condensed grotesque
     that mimics Pricedown's silhouette and stays legible small". Self-hosting a
     licence-restricted face into a public app is a licensing decision, not a
     styling one. If Brandon wants Pricedown on the hero, it needs a web licence
     and a self-hosted @font-face; until then Oswald is the whole headline tier
     and the wordmark is set in it too. */
  --font-primary: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-headline: "Oswald","Inter",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --font-instrument: "IBM Plex Mono","SFMono-Regular",ui-monospace,"Roboto Mono",monospace;
  /* Pinyon Script is Gnothia's ceremonial face and has no place on this brand.
     Pointed at the headline face so a shared template that reaches for it gets
     Oswald rather than copperplate script. */
  --font-ceremonial: var(--font-headline);

  /* Inter runs smaller on the page than Fraunces at the same nominal size, and
     the display tier is condensed, so both scale up a touch to hold the same
     presence. */
  --fs-display: clamp(2.6rem,5.6vw,4.2rem);
  --fs-coldopen: clamp(1.45rem,3vw,2.15rem);
}

/* The semantic layer. Re-declared rather than inherited because gnothia.css sets
   these from its own ramp, and a token that resolves through var() would still
   resolve to the value it was given there. */
:root, [data-surface="paper"] {
  --bg: var(--paper); --bg-inset: var(--paper-deep);
  --ink: var(--earth-basalt); --ink-2: var(--stone-mid); --ink-3: var(--stone-ash);
  --line: var(--stone-hairline); --link: var(--earth-terracotta-deep);
  --accent: var(--earth-ochre); --focus: var(--earth-ochre);
}
[data-surface="sky"] {
  --bg: var(--sky-night); --bg-inset: var(--sky-indigo);
  --ink: var(--sky-dawn); --ink-2: #B9B0A0; --ink-3: #8A8272;
  --line: var(--sky-indigo-line); --link: #7FA79D;
  --accent: var(--earth-ochre); --focus: var(--earth-ochre);
}

/* Inter is a variable font with no optical-size axis; Fraunces' opsz settings
   would be inherited and applied to it as a nonsense axis. Cleared explicitly. */
body {
  font: 400 1.0625rem/1.65 var(--font-primary);
  font-variation-settings: normal;
}

/* ── The headline tier ───────────────────────────────────────────────────────
   BRAND.md: "Set them the same way: all-caps, tight tracking, line-height near 1."
   Applied to the type roles the shared templates actually use. Class names are
   gnothia.css's own — re-styled, never renamed. */
.type-display,
.type-h1, .type-h2, .type-h3,
.wordmark, .wordmark--display,
.type-ceremonial {
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-variation-settings: normal;
  font-weight: 600;
}
.type-display      { line-height: 1.02; letter-spacing: 0; font-weight: 700; }
.type-h1           { line-height: 1.06; font-weight: 700; }
.type-h2           { line-height: 1.08; }
.type-h3           { line-height: 1.12; font-weight: 500; }
.wordmark,
.wordmark--display { line-height: 1.0; font-weight: 700; letter-spacing: 0.01em; }

/* Pinyon's tall ascenders earned that padding; a condensed grotesque does not
   want it, and on this brand the ceremonial tier is just a large headline. */
.type-ceremonial {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.04;
  padding: 0;
}

/* Body-tier roles stay in Inter and stay sentence case — the uppercase rule above
   is the headline tier only, and must not leak into anything a reader reads in
   quantity. */
.type-body, .type-body-lg, .type-small, .type-micro, .type-cold-open, .cold-open {
  font-family: var(--font-primary);
  text-transform: none;
  letter-spacing: normal;
  font-variation-settings: normal;
}

/* Gnothia's gilt gradient is a gold leaf effect that belongs to its register.
   Re-cut in Bronze so a shared template that uses it stays inside this palette. */
.type-gilt {
  background-image: linear-gradient(176deg, #D2A868 0%, #B8823A 52%, #7A5522 100%);
}

/* Labels and small instrument type take Pine — the job BRAND.md wanted eyebrows
   to do, given to the elements that survive the eyebrow ban. */
.field-label, .type-instrument, .type-micro {
  color: var(--earth-terracotta);
  font-family: var(--font-primary);
  letter-spacing: 0.02em;
}

/* Buttons: Oswald, so the call to action carries the same voice as the headings. */
.btn, .btn-primary, .btn-secondary, .btn-quiet, .btn-destructive {
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PORTAL LAYER.

   relationship-portal.css is loaded on top of the brand stylesheet and drives the
   Operator portal shell — the rail, the content column, the pinned ask bar. It was
   written against gnothia-v2.css, NOT gnothia.css, so it consumes 31 tokens that
   nothing else in this brand's chain defines. Undefined, a CSS variable falls back
   to nothing: the rail loses its background, every border disappears, and the
   spacing scale collapses. The portal looked broken before these existed.

   THE DIRECTION IS INVERTED ON PURPOSE. The Guide's ink-500..900 ramp runs from
   dark to darker because that portal is a dark surface. The Operator Profile is a
   LIGHT document — Bone ground, Obsidian ink, §2.4 — so the same ramp runs from
   Bone to slightly deeper Bone, and the text tokens run dark instead of pale. The
   NAMES are kept exactly, because the portal CSS references them by name and a
   rename would be a fork of a 1,173-line stylesheet.
   ══════════════════════════════════════════════════════════════════════════ */
.pt {
  /* Surfaces. Bone, deepening — the rail sits one step off the page ground. */
  --ink-900: #DCD3BE;
  --ink-800: #E2DAC7;          /* the rail */
  --ink-700: #E6DFCD;
  --ink-600: #EAE3D3;          /* the content ground — Bone itself */
  --ink-500: #F0EADC;

  /* Text, running dark on a light ground. */
  --text-bright: #13140F;      /* Obsidian */
  --text-strong: #2A2B22;
  --text-body:   #4A4B3E;
  --text-dim:    #6B6455;      /* overrides the portal's own AAA-on-dark value */

  /* Lines are dark-on-light here, not white-on-dark. */
  --line-strong: rgba(19, 20, 15, 0.10);
  --line-loud:   rgba(19, 20, 15, 0.20);

  /* Accents. Pine leads, Bronze is the single second accent. The Guide's teal and
     crimson are re-pointed rather than left undefined so nothing renders as a
     stray colour from another brand. */
  --teal:     #3F6B62;         /* Pine */
  --teal-dim: #3F6B6220;
  --crimson:  #8E3826;
  --thread:   linear-gradient(90deg, #3F6B62 0%, #7A8F6B 52%, #B8823A 100%);
  --lab-fill: #E2DAC7;

  /* Type. Same two faces as the rest of the brand — no third family sneaks in
     through the portal layer. */
  --font-body:    var(--font-primary);
  --font-display: var(--font-headline);
  --font-mono:    var(--font-instrument);
  /* The chapter canvas is a reading surface and gets the LIGHT treatment too;
     the Guide's near-black #101016 would drop a dark slab into a Bone document. */
  --font-reading:   var(--font-primary);
  --reading-ground: #EAE3D3;
  --reading-ink:    #13140F;

  /* Radii, motion and the spacing scale, carried over unchanged — these are
     geometry and timing, not brand colour, and the portal's layout is tuned to them. */
  --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px;
  --dur-fast: 150ms; --dur-slow: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.30, 1);
  --space-2xs: clamp(0.5rem,  0.46rem + 0.18vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.69rem + 0.27vw, 0.9375rem);
  --space-s:   clamp(1rem,    0.93rem + 0.36vw, 1.25rem);
  --space-m:   clamp(1.5rem,  1.39rem + 0.54vw, 1.875rem);
  --space-l:   clamp(2.25rem, 2.07rem + 0.89vw, 3rem);
  --space-xl:  clamp(3.5rem,  3.14rem + 1.79vw, 5rem);
}

/* The portal's own headings take the brand's headline treatment, so a rail label
   and a section title look like they belong to the same product. */
.pt .type-h1, .pt .type-h2, .pt .type-h3 { font-family: var(--font-headline); }