/* ==========================================================================
   Canoli colour tokens: the Canoli-brand counterpart of tokens.css.
   Every value here comes from canoli-tokens.json, mode "Damson bright"
   (the design system's working candidate; WP-E shipped the logo and app
   icon against it). Nothing in this file is a Nibblr hue.

   This file is NOT linked directly. The brand registry selects it at
   runtime through its :tokens-css entry, so exactly one token sheet is
   loaded per brand and every first-party stylesheet resolves against it.

   THE NAME SET MUST STAY IDENTICAL TO tokens.css. Same 104 custom
   properties, no more and no fewer, in the same order and grouping.
   A name defined in one sheet but not the other is not a cosmetic gap:
   var(--x) with no definition resolves to nothing and the element loses
   its colour entirely. A test asserts exact name parity.

   The three-role contract is inherited unchanged: X is identity (fills,
   borders, icons, chart marks), X-bg is the tint (8 digit hex, always
   15% = 0x26, composited over whatever surface it lands on), X-text is
   the only legal label colour on X-bg. Never X as a label on its own
   tint; never X-text on the solid identity colour.

   Names with no Canoli counterpart are derived from the Canoli palette
   only, never carried across from Nibblr. Each derivation is annotated
   inline with its Canoli source.
   The CSS hex guard enforces vars-not-hexes across all of it.
   ========================================================================== */

:root {
  --brand-gold: #FFD66B; /* accent/highlight (butter), the AI and highlight accent */
  --brand-gold-hover: #E0A11A; /* derived: the darker butter rung the system already holds (Damson accent/highlight) */
  --brand-espresso: #241426; /* derived: core/slab, the darkest brand plane */
  --brand-cocoa: #4A2A4E; /* derived: core/ink-soft, the mid rung of the ink ladder */
  /* shell #FDFBFA, the PAGE BACKGROUND. Was core/on-ink #FAF4EF,
     matched on 'the system's warm off-white', but on-ink is the text
     colour used ON a dark slab surface, not a ground to put a page
     on. Nibblr's parchment is its base light background, so the role
     that carries across is shell. Caught by eye on the brand book,
     whose body background is this token. */
  --brand-parchment: #FDFBFA;
  --brand-clay: #715575; /* derived: core/ink-muted, tertiary text and decorative marks */
  --brand-terracotta: #FF5A75; /* derived: accent/punch, the failure accent terracotta stood for */
  /* Links on a LIGHT surface. Its own token because no existing one fits:
     accent/punch itself is 3.01:1 on white and semantic/fail is the right
     contrast but the wrong meaning for a link.

     Derived from punch by taking lightness out until it cleared AA with
     headroom: 5.81:1 on the white card, 5.63:1 on shell. Body copy needs
     4.5:1, and the value it replaced (--brand-gold, butter) was 1.39:1, so
     this is a legibility fix rather than a preference.

     The hover DARKENS. The rule it replaced faded to 0.8 opacity, which on
     any passing colour blends back toward the ground: this value at 0.8 over
     white lands at 4.20:1, so the fade would have undone the fix on hover. */
  --link-on-surface: #C0264A;
  --link-on-surface-hover: #8E1B37;
  --accent-teal: #FFD66B; /* accent/highlight; teal was already collapsed onto the highlight accent */
  --accent-teal-hover: #E0A11A; /* derived: darker butter rung, matches --brand-gold-hover */
  --accent-teal-light: #FFD66B26; /* accent/highlight at 15% (= source/canoli-bg) */
  --accent-teal-text: #6E4A00; /* accent/highlight-text */
  --accent-orange: #B27A0E; /* derived: semantic/warning, the amber identity of the system */
  --accent-orange-light: #B27A0E26; /* semantic/warning-bg */
  --accent-orange-text: #6E4A00; /* semantic/warning-text */
  --bg-primary: #FDFBFA; /* core/shell */
  --bg-surface: #FFFFFF; /* core/surface */
  --bg-muted: #F5EAE0; /* core/surface-muted */
  /* The ground the auth card floats on. SHELL, not surface-muted.
     surface-muted is a warm beige, and a visitor arriving from the marketing
     page, whose light sections are all shell, met a warm parchment ground
     the moment they hit /login. The two grounds now match, and the change is
     scoped to this token so Nibblr's login is untouched. */
  --auth-screen-bg: #FDFBFA; /* core/shell, same as --bg-primary */
  --bg-sidebar: #241426; /* core/slab */
  --bg-sidebar-hover: #362638; /* derived: core/slab lifted by the same +0x12 per channel step Nibblr used */
  --bg-secondary: #F5EAE0; /* core/surface-muted; matched --bg-muted in Nibblr too */
  --border-primary: #EADCCB; /* core/line */
  --border-divider: #F2E7DA; /* core/line-soft */
  --text-primary: #241426; /* core/ink */
  --decorative-muted: #715575; /* derived: core/ink-muted, "tertiary text and decorative marks" */
  --text-on-dark: #FAF4EF; /* core/on-ink */
  --status-pass: #2C7A4B; /* semantic/pass */
  --status-pass-bg: #2C7A4B26; /* semantic/pass-bg */
  --status-pass-text: #135C33; /* semantic/pass-text */
  --status-fail: #A81B33; /* semantic/fail */
  --status-fail-bg: #A81B3326; /* semantic/fail-bg */
  --status-fail-text: #7A0F22; /* semantic/fail-text */
  --status-warning: #B27A0E; /* semantic/warning */
  --status-warning-bg: #B27A0E26; /* semantic/warning-bg */
  --status-warning-text: #6E4A00; /* semantic/warning-text */
  --confidence-high: #2C7A4B; /* derived: semantic/pass, the role confidence-high already shared */
  --confidence-high-text: #135C33; /* derived: semantic/pass-text */
  --confidence-medium: #B27A0E; /* derived: semantic/warning */
  --confidence-medium-text: #6E4A00; /* derived: semantic/warning-text */
  --confidence-low: #A81B33; /* derived: semantic/fail */
  --confidence-low-text: #7A0F22; /* derived: semantic/fail-text */
  --source-cofid: #2E7E82;
  --source-cofid-bg: #2E7E8226;
  --source-cofid-text: #174F52;
  --source-canadian: #B0426A;
  --source-canadian-bg: #B0426A26;
  --source-canadian-text: #7A1F42;
  --source-norwegian: #2E6FA0;
  --source-norwegian-bg: #2E6FA026;
  --source-norwegian-text: #1A4E77;
  --source-swedish: #9B4E8C;
  --source-swedish-bg: #9B4E8C26;
  --source-swedish-text: #5F2C55;
  --source-frida: #C05621;
  --source-frida-bg: #C0562126;
  --source-frida-text: #7C3310;
  --source-composite: #6B5B70;
  --source-composite-bg: #6B5B7026;
  --source-composite-text: #403647;
  --source-pro: #FFD66B; /* source/canoli: the Curated badge, named after the brand */
  --source-pro-bg: #FFD66B26; /* source/canoli-bg */
  --source-pro-text: #6E4A00; /* source/canoli-text */
  --source-user: #9B7BA0;
  --source-user-bg: #9B7BA026;
  --source-user-text: #4A2A4E;
  --source-ai: #7A3F6D;
  --source-ai-bg: #7A3F6D26;
  --source-ai-text: #4E2245;
  --info: #2E6FA0; /* semantic/info */
  --info-bg: #2E6FA026; /* semantic/info-bg */
  --info-text: #1A4E77; /* semantic/info-text */
  --bg-panel: #FBF7F3; /* step 3: quiet panel / track background; derived by stepping core/shell 26% toward core/surface-muted, the same fraction of the ladder Nibblr used */
  --status-fail-hover: #7A0F22; /* step 3: darkened fail for destructive-button hover; the next rung down the fail ladder (semantic/fail-text's value), within 2 units of semantic/fail darkened by Nibblr's 0.72 factor */
  --status-pass-soft: #2C7A4B0F; /* step 3: faintest pass tint (row flags, hovers) */
  --status-pass-strong: #2C7A4B40; /* step 3: strong pass tint (active borders) */
  --status-warning-soft: #B27A0E0F; /* step 3: faintest warning tint */
  --status-warning-strong: #B27A0E40; /* step 3: strong warning tint */
  --status-fail-soft: #A81B330F; /* step 3: faintest fail tint */
  --gold-soft: #FFD66B0F; /* step 3: faintest highlight tint */
  --gold-tint: #FFD66B24; /* step 3: highlight tint (badges, focus shadows) */
  --gold-selected: #FFD66B33; /* step 3: highlight selection background */
  --gold-strong: #FFD66B40; /* step 3: strong highlight tint (selection hover) */
  --badge-lilac-bg: #B79CFF26; /* step 3: categorical lilac badge plate; series/lilac at the contract's 15% */
  --badge-lilac-text: #5F2C55; /* step 3: categorical lilac badge label; source/swedish-text, the only solved label colour the system holds for a violet tint */
  --crm-score-0: #715575; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. core/ink-muted, the neutral unscored rung */
  --crm-score-1: #7CB8FF; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. series/sky */
  --crm-score-2: #B79CFF; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. series/lilac */
  --crm-score-3: #9B4E8C; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. source/swedish, the deep violet rung */
  --crm-score-4: #FFD66B; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. series/butter */
  --crm-score-5: #2E7E82; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. source/cofid, the deep teal-green rung */
  --crm-score-6: #6FDFB8; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. series/mint */
  --crm-score-7: #C05621; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. source/frida, the deep amber-orange rung */
  --crm-score-8: #2E6FA0; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. source/norwegian, the deep blue rung */
  --crm-score-9: #B0426A; /* step 3: CRM lead-score scale, a 10-step data-viz series; do not collapse onto status colours. source/canadian, the deep rose rung; accent/punch is reserved for compliance failure */
  --border-soft: #F2E7DA; /* core/line-soft */
  --text-on-dark-subtle: #CBB8CF; /* core/on-ink-muted */
  --sky-plate: #7CB8FF; /* series/sky, the seal plate. A series colour used as a surface rather than a data encoding, which is why it needs a name of its own: the CRM ramp token is a scale position and must not be borrowed for chrome. Pairs with --info-text, which is the only legible lettering on it. */
  --mint-plate: #6FDFB8; /* series/mint used as a SURFACE, the seal plate. Same value as --mint-on-dark and a separate name for the same reason --sky-plate is separate from --crm-score-1: a series colour used as chrome is a different role from the same colour used as text or as a scale position, and a role needs a name it can be re-pointed by. Carries --text-primary at 10.74:1. NOT --status-pass: the Verdict Rule reserves the compliance green for a regulatory pass, and a marketing badge reading VERIFIED in that green would assert one. The mint rung exists precisely so affirmation can be said without binding to the verdict family. */
  --mint-on-dark: #6FDFB8; /* series/mint, the affirmation tone for text on the Damson plane. NOT a verdict: --status-pass (#2C7A4B) is the compliance green and the Verdict Rule reserves it for a regulatory pass. This rung exists because series/mint and semantic/pass-on-ink resolve to the same value, so marketing copy can carry the mint without binding to the verdict family. Only legible on a dark ground; on cream it fails contrast. */
  --cream: #FAF4EF; /* step 3: cream card/panel surface, also cream text on the slab. core/on-ink carries both jobs */
  --cream-deep: #F5EAE0; /* step 3: deeper cream (table heads). core/surface-muted, whose stated role is table headers and muted strips */
  --cream-border: #EADCCB; /* step 3: border on cream surfaces. core/line */
  --cream-tag: #F5E5CA; /* step 3: tag/chip background on cream. core/blush, the system's warm tint plane */
  --text-deep: #4A2A4E; /* step 3: body text on cream surfaces. core/ink-soft, the secondary text rung */
  --text-label: #715575; /* step 3: labels, breadcrumbs, section eyebrows. core/ink-muted, the tertiary text rung */
  --tag-amber-bg: #FFD66B26; /* step 3: editorial amber tag plate; accent/highlight at 15%. Canoli holds one highlight accent and butter replaced citron everywhere */
  --tag-amber-text: #6E4A00; /* step 3: editorial amber tag label; accent/highlight-text, solved against that exact tint */
  --decorative-off: #715575; /* step 3: muted/off badge state. core/ink-muted; it is a label colour on a light surface, so the lighter on-slab neutral cannot serve here */

  /* THE THREE PER-BUNDLE TEXT ROLES, given a Canoli answer.
     ------------------------------------------------------------------
     app.css and marketing.css each declare --text-secondary and friends
     in their own :root, which tokens.css documents as deliberate because
     the two bundles genuinely want different weights: dense product UI
     and marketing prose are read at different sizes on different grounds.

     Being per-bundle was fine. Being brand-blind was not. Those
     declarations held Nibblr browns (#7A6153 in the app, #5C4033 and
     #725E46 in marketing) with no way to vary, so every brand rendered
     Nibblr's secondary text: 414 rules in app.css alone, and 126 in the
     brand book, which is most of the warm cast on a Damson page.

     Declared Canoli-only, and referenced from the bundles with the
     literal each already rendered as the fallback. That is the pattern
     brand-assets-test describes for exactly this case: Nibblr keeps its
     value byte for byte and does not have to carry a token it has no use
     for, while Canoli gets the rung the ladder already defines.

     Measured on core/surface-muted, the worst light ground and the one a
     row hover puts under the text: ink-soft 10.24:1, ink-muted 5.44:1. */
  --text-secondary-app: #4A2A4E; /* core/ink-soft, the secondary text rung */
  --text-secondary-marketing: #4A2A4E; /* the same rung: one ladder, and prose has no lighter step that still clears AA */
  --text-muted-marketing: #715575; /* core/ink-muted, the tertiary rung */
  --text-on-dark-muted-app: #CBB8CF; /* core/on-ink-muted. Non-text only, as in the app bundle: a decorative mark on the Damson plane */

  /* Typefaces (design system section 4): Jost display, Figtree UI, DM
     Mono data. DM Mono is the one family shared with Nibblr. The webfont
     request lives in the registry as :google-fonts-url. */
  --font-primary: 'Figtree', sans-serif;
  --font-display: 'Jost', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Shape (design system section 5): radius lg 28 for the floating rail,
     pill 999 for the active nav row, and the rail is inset from the page
     edge so the shell shows around it. This is the shape difference the
     Canoli frames show, expressed as tokens rather than forked CSS. */
  --radius-nav-item: 999px;
  /* 24px, MEASURED on the rail in both signed-off frames (recipe 554:25,
     library 556:25). The design-system doc says radius/lg 28 and this
     token was set to 28 from that doc; Adam ruled 2026-08-27 that the
     Figma frames are canonical and a doc that disagrees is a mis-encoding
     to be corrected, not a source to follow. */
  --radius-sidebar: 24px;
  --sidebar-inset: 16px;
  /* The frames draw the rail at 232px; ours was 220. */
  --sidebar-width: 232px;
  /* Nav rows: 44px tall at a 52px pitch, so an 8px gap (ours was 2px),
     and 12px between the dot and its label (ours was 10px). */
  --nav-gap: 8px;
  --nav-item-gap: 12px;
  /* The active nav row is a SOLID butter pill with slab ink on it, not a
     tint: accent/highlight filled, core/ink as the label. */
  --nav-active-fill: #FFD66B;
  --nav-active-label: #241426;

  /* Sidebar org card + nav dot (Canoli frames). The dot is the muted
     on-slab tone; on the butter pill it flips to slab ink so it reads
     against the fill. The card sits on a lifted plane above the rail. */
  --nav-dot: #CBB8CF;
  --nav-dot-active: #241426;
  --org-card-bg: #33203699;
  --org-avatar-bg: #FFD66B;
  --org-avatar-text: #241426;

  /* ---------------------------------------------------------------------
     SHAPE, measured from the signed-off frames (recipe 554:20, ingredient
     library 556:20), not from the radius rung scale. Those two disagree:
     the frames use 6/8/9/10/12/14/16/18/21/22/24/28/999 and only four of
     those land on a rung. The frames are the artefact being matched, so
     they win here; see the note in the spec.

     ONLY CANOLI DEFINES THESE. Every consuming rule in app.css is written
     `var(--radius-x, <the current Nibblr literal>)`, so Nibblr defines
     nothing, falls back to exactly what it renders today, and cannot be
     moved by this work at all. Role names, never size rungs: marketing.css
     already owns --radius-sm/md/lg/xl with different values, and a bare
     rung name would collide wherever both bundles load.
     --------------------------------------------------------------------- */
  --radius-button: 999px;
  --radius-field: 999px;
  --radius-field-sm: 6px;
  /* Every textarea and multi-line field. --radius-field is a pill, which
     suits one line and balloons on a box several lines tall. 12 is Figma
     radius/sm, the notes box on the signed-off recipe page (554:1232). */
  --radius-field-multiline: 12px;
  --radius-toggle: 999px;
  --radius-chip: 999px;
  --radius-chip-sm: 6px;
  --radius-source-badge: 12px;
  --radius-card: 18px;
  --radius-card-sm: 14px;
  --radius-table: 16px;
  --radius-list-card: 28px;
  --radius-banner: 9px;
  --radius-org-card: 18px;
  --radius-dropzone: 10px;
  --shadow-lifted: 0 8px 24px #2414261A;

  /* Two core values with no Nibblr counterpart, so nothing else in the
     app consumes them. They exist because the brand book documents the
     FULL Damson ladder and a vocabulary with holes in it is not the
     vocabulary. */
  --ink-deep: #180D1A;
  --blush-deep: #EBD5AE;

  /* A native <select> renders its caret inside the padding box. At
     --radius-field 999px the right edge curves inward, so the 12px that
     cleared the caret on an 8px box leaves it sitting in the curve. */
  --select-pad-right: 22px;

  /* The mark's silhouette, for decorative shapes that should read as the
     brand rather than as generic circles. A MASK, not an image, so the
     shape follows the mark while the colour stays a token. */
  --decor-mask: url("/img/canoli/atom-mask.svg");

  /* The scattered-mark hero field (brand book cover). Shown only where the
     brand has a glyph to scatter; see --decor-mask. */
  --decor-field-display: block;

  /* Ingredient library (Figma 556:20). The list is a card LIFTED off the
     page rather than a column divided by a rule, and the category rows on
     the right are pills. Both pages share these classes, so /ingredients
     and /ingredients/mine follow together. */
  --list-panel-bg: var(--bg-surface);
  --list-panel-border: none;
  --library-gap: 20px;
  --category-row-border: none;

  /* Interior padding for the lifted list card: its rows and the selected
     highlight must sit INSIDE the corner radius, not run into it. */
  --list-panel-pad: 10px;

  /* Catalogue directory (Figma 556:20): each category is a rounded card
     on its own surface, laid out on a uniform grid, with the chevron
     after the count. The default brand keeps the bare column list.

     16px, NOT the chip pill. The tile used to borrow --radius-chip (999px),
     which reads as a pill only while the name fits on one line; at tablet
     width "Bread, Baked Goods & Baking Supplies" wraps to five lines and a
     999px radius turns the tile into an egg (Adam, iPad, 2026-09-03). The
     frame's tile (556:124) is a 52px-tall card with a 16px corner. */
  --directory-display: grid;
  --directory-grid: repeat(3, 1fr);
  --directory-gap: 12px 16px;
  --directory-card-bg: var(--bg-surface);
  --directory-card-border: 1px solid var(--border-primary);
  --directory-card-pad: 16px 20px;
  --directory-card-radius: 16px;

  /* The frame sets the category count in the body face at reading size,
     in primary ink, not the small secondary mono. */
  --directory-count-font: var(--font-primary);
  --directory-count-size: 15px;
  --directory-count-color: var(--text-primary);

  /* Saved / active state. Butter is the brand accent for active states in
     the design system; green stays scoped to a compliance pass. */
  --state-active-accent: var(--brand-gold);
  /* The only legal label colour on/with butter (source/canoli-text). */
  --state-active-accent-text: var(--source-pro-text);
}