/* === SWARF BRAND TOKENS ===
   Source of truth: Brand Identity Kit (Machiineit, adopted for Swarf 06/2026).
   Colors, fonts, and the logo spin. Page styles live elsewhere — this file
   is tokens only, importable by any surface (app, mocks, dev pages). */

/* --- Caviar Dreams (secondary font: CTAs and accent moments) --- */
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/caviar-dreams/CaviarDreams.3670aa493ee0.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/caviar-dreams/CaviarDreams_Bold.65ab651cc7ce.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/caviar-dreams/CaviarDreams_Italic.e67f5c38635c.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/caviar-dreams/CaviarDreams_BoldItalic.825e49e42ab8.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Primary palette */
  --brand-charcoal: #303135; /* foundation dark */
  --brand-orange: #f27431; /* primary orange */
  --brand-orange-deep: #f15a24; /* reserved: calls to action */
  --brand-slate: #708090; /* cool counterweight */
  --brand-white: #ffffff;

  /* Secondary palette */
  --brand-orange-soft: #f68b32;
  --brand-orange-mid: #f28d31;
  --brand-gunmetal: #59656d;

  /* Meter-fill accent green — theme-invariant like -orange-soft/-mid above
     (a progress-bar fill, not the --color-success surface/-content pair,
     which is far too dark to read as a bright fill) (Swarf-AI/webapp#4294). */
  --brand-success-accent: #2bbf8c;
  --brand-success-accent-light: #37d6a0;

  /* Ink for text on an accent (--brand-orange) background — theme-invariant
     like -soft/-mid/-deep above, since --brand-orange itself theme-shifts
     (#ff7d2e dark / #bf4e06 light) but near-black reads on both (Swarf-AI/webapp#4293). */
  --brand-on-accent: #1a1206;

  /* Brand gradient (linear, primary → CTA) */
  --brand-gradient: linear-gradient(135deg, #f27431, #f15a24);

  /* Typography. Space Grotesk is the primary face (headings + body).
     Caviar Dreams (CTAs, eyebrows, accent moments) is available via
     the @font-face rules above. See docs/RESKIN.md for the full rationale. */
  --brand-font-primary: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --brand-font-secondary: "Caviar Dreams", ui-sans-serif, system-ui, sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* === MC DARK THEME TOKENS ===
   Applied whenever body.theme-mc is present. Overrides DaisyUI winter base
   vars and sets framework-agnostic surface tokens used by all templates and
   allauth pages. Adding brand.css is sufficient — no extra stylesheet needed. */

/* Base color tokens: override DaisyUI winter values via :root for bg-base-* utilities. */
:root:has(body.theme-mc) {
  --root-bg: #0b0e10;
  --color-base-100: #0b0e10;
  --color-base-200: #0f1316;
  --color-base-300: #161e24;
  --color-base-content: #e9eef2;
  --color-neutral: var(--brand-charcoal); /* warm charcoal — overrides DaisyUI winter's blue-cast neutral */
  --color-primary: #ff7d2e; /* brand orange replaces DaisyUI winter's blue for btn-primary, text-primary, etc. */
  --color-primary-content: #0b0e10; /* dark text on orange buttons */
  --color-success: #163a1e; /* dark green surface — replaces mint */
  --color-success-content: #bbf7d0; /* soft green text */
  --color-info: #0e2747; /* dark navy surface — replaces light blue */
  --color-info-content: #bfdbfe; /* soft blue text */
  --color-warning: #3d2c07; /* dark amber surface */
  --color-warning-content: #fde68a; /* soft yellow text */
  --color-error: #3b0d0d; /* dark crimson surface */
  --color-error-content: #fecaca; /* soft red text */
  color-scheme: dark;
}

/* Surface and semantic tokens: used directly by component styles. */
body.theme-mc {
  --brand-orange: #ff7d2e; /* slightly brighter on dark backgrounds */
  --color-surface-raised: #141a1e; /* one step above base-200; user bubbles + active sidebar */
  --color-muted: #b2b7bb; /* de-emphasized text */
  --color-muted-dim: #9aa7b1; /* darker muted — secondary text inside dark panels and board rows */
  --color-separator: #222a30; /* mid-tone rule between surface-raised and border */
  --color-inset: #10151a; /* recessed well background — below base-200 */
  --color-border: #2c363d; /* standard UI border */
  --color-border-subtle: color-mix(in srgb, var(--color-base-content), transparent 86%); /* ~14% white hairline */

  /* Elevation + overlay tokens (Swarf-AI/webapp#2613 Stage 2). Whole-shadow tokens rather
     than bare colors so a light theme can soften opacity and spread together.
     Values are byte-identical to the raw blacks they replaced. */
  --shadow-pop: 0 18px 50px -18px rgb(0 0 0 / 70%); /* floating panels: account-pop, credits-pop, modal-box */
  --shadow-menu: 0 8px 24px rgb(0 0 0 / 0.4); /* dropdown/composer menus */
  /* Tight contact shadow, layered under --shadow-menu (Swarf-AI/webapp#4185) — the ambient
     shadow alone reads flat against the dark page; this grounds the menu's
     own edge the way an inset hairline highlight does on a physical panel. */
  --shadow-menu-contact: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-overlay-card: 0 20px 60px rgba(0, 0, 0, 0.5); /* paywall card */
  --shadow-hover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); /* starter-card hover lift */
  --color-scrim: rgba(0, 0, 0, 0.6); /* full-viewport overlays (paywall) */

  /* Floating-menu radii (Swarf-AI/webapp#4185) — previously hardcoded literals with no
     token; DaisyUI's own --radius-* scale is never adopted elsewhere in this
     codebase (brand.css owns every visual value on top of DaisyUI's
     structural classes), so these follow that established pattern rather
     than wiring in a new one. */
  --radius-menu: 12px;
  --radius-menu-item: 8px;
}

/* DaisyUI's text-{semantic} utilities paint --color-{semantic} as the text
   color. Under theme-mc those tokens are dark SURFACE colors (consumed by
   alert-{semantic} backgrounds), so inline semantic text — form errors, status
   badges, icons — renders at ~1.1–1.5:1 on the page background (unreadable).
   Route the text utilities to the readable --color-{semantic}-content tokens.
   This (0,2,1) outranks DaisyUI's .text-{semantic} and .btn color rules (all
   0,1,0), so it covers .btn.text-{semantic} (the feedback thumbs) as well as
   plain elements. alert/badge/btn *fills* are unaffected — they resolve color
   via .alert-{semantic} / --btn-fg, not .text-{semantic}. */
body.theme-mc .text-success {
  color: var(--color-success-content);
}

body.theme-mc .text-error {
  color: var(--color-error-content);
}

body.theme-mc .text-warning {
  color: var(--color-warning-content);
}

body.theme-mc .text-info {
  color: var(--color-info-content);
}

/* DaisyUI's .link-primary:hover darkens the color toward black (mix with #000) —
   right for a light theme, wrong for theme-mc, where it drops the orange link
   from 7.58:1 to 4.34:1 (sub-AA) on hover. Lighten toward white instead so the
   hover both clears AA and gives the expected "brighter on hover" feedback on
   the dark page. Lives here (not triptych.css) because brand.css loads on the
   allauth entrance pages where these links appear; triptych.css does not. (Swarf-AI/webapp#2716) */
body.theme-mc .link-primary:hover {
  color: color-mix(in oklab, var(--color-primary) 80%, #fff);
}

/* A plain (uncolored) DaisyUI .btn-outline:hover fills with a near-page-dark color
   and sets the border to match, so the light outline that defines the button at
   rest disappears and the fill blends into the dark page — the button reads as
   invisible on hover (the rest state is fine). Keep the boundary and label: a
   subtle base-300 fill with border and text held at base-content. Scoped away from
   colored outlines (.btn-outline.btn-primary etc.), which hover their own color
   correctly. Static screenshots never trigger :hover, so this slipped the
   rest-state audit. (Swarf-AI/webapp#2716) */
body.theme-mc
  .btn-outline:not(
    .btn-primary,
    .btn-secondary,
    .btn-accent,
    .btn-neutral,
    .btn-info,
    .btn-success,
    .btn-warning,
    .btn-error
  ):hover {
  background-color: var(--color-base-300);
  border-color: var(--color-base-content);
  color: var(--color-base-content);
}

/* The endmill mark, cutting. Slow by default — it's a brand gesture,
   not a loading spinner. */
@keyframes brand-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* The mark always spins under the cursor — anywhere it appears. Put
   .brand-mark on the logo element; hovering it or its parent row cuts. */
.brand-mark:hover,
:hover > .brand-mark {
  animation: brand-spin 2s linear infinite;
}

/* Recolor Swarf logo from default blue to the brand kit's four-tone orange
   ramp (Swarf_Logo_Orange.svg — the Machineit identity kit's own palette;
   Riley, 2026-07-02: the favicon ramp's light-tan cross "is a bit off").
   .st0–.st3 are the Illustrator-generated fill classes in icons.html.
   The mark deliberately does NOT derive from --brand-orange: text/button
   orange shifts per-theme for WCAG AA, but a brand mark carries no
   text-contrast requirement — it stays the same saturated ramp on dark and
   light. Black mixes are what made the old shading read muddy-brown
   (Swarf-AI/webapp#2613 taste pass). */
body.theme-mc .st0 {
  fill: var(--brand-orange-soft);
}

body.theme-mc .st1 {
  fill: var(--brand-orange-mid);
}

/* Not var(--brand-orange): that token theme-shifts (#ff7d2e dark / #bf4e06
   light AA) while the mark must hold the kit's #f27431 on both. The -soft/
   -mid/-deep tokens above are theme-invariant, so they're safe to reference. */
body.theme-mc .st2 {
  fill: #f27431;
}

body.theme-mc .st3 {
  fill: var(--brand-orange-deep);
}

/* === MC LIGHT MODE TOKENS (Swarf-AI/webapp#2613 Stage 2) ===
   Light values for every token the dark blocks above define. Dark is the
   absent-class default; adding body.theme-light overrides it (source order +
   specificity — proven against the live cascade before this block landed).
   Brand (theme-mc) and mode (theme-dark/theme-light) are separate axes.
   Primary darkens to hold WCAG AA against light surfaces (#ff7d2e is ~2.9:1
   on white). Mode resolution (param > User.appearance preference > dark) is
   documented in docs/CSS_PATTERNS.md §Light theme. */
:root:has(body.theme-light) {
  --root-bg: #f7f7f5;
  --color-base-100: #f7f7f5;
  --color-base-200: #efefec;
  --color-base-300: #e2e2dd;
  --color-base-content: #10161c;
  --color-primary: #bf4e06; /* darkened brand orange — 4.5:1+ text on light base, white AA on fills */
  --color-primary-content: #ffffff;
  --color-success: #d3f1da;
  --color-success-content: #14532d;
  --color-info: #dbeafe;
  --color-info-content: #1e3a8a;
  --color-warning: #fef3c7;
  --color-warning-content: #713f12;
  --color-error: #fee2e2;
  --color-error-content: #7f1d1d;
  color-scheme: light;
}

body.theme-mc.theme-light {
  --brand-orange: #bf4e06;
  --color-surface-raised: #ffffff;
  --color-muted: #5b6570;
  --color-muted-dim: #4d5866; /* on light, dim = darker (4.5:1+ on base-200 eyebrows) */
  --color-separator: #dcdcd6;
  --color-inset: #ecece8;
  --color-border: #c9c9c2;
  --color-border-subtle: color-mix(in srgb, var(--color-base-content), transparent 88%);
  --shadow-pop: 0 18px 50px -18px rgb(23 30 36 / 28%);
  --shadow-menu: 0 8px 24px rgb(23 30 36 / 0.14);
  --shadow-menu-contact: 0 1px 2px rgb(23 30 36 / 0.1);
  --shadow-overlay-card: 0 20px 60px rgba(23, 30, 36, 0.22);
  --shadow-hover: 0 0.25rem 0.75rem rgba(23, 30, 36, 0.08);
  --color-scrim: rgba(20, 24, 28, 0.45);
}

/* DaisyUI paints placeholders as base-content at 50% alpha — fine on dark,
   sub-AA (~3.1:1) composited over the light base. Use the opaque muted token
   instead (5:1+). */
body.theme-mc.theme-light ::placeholder {
  color: var(--color-muted);
  opacity: 1;
}