/* website/brand/brand.css: the ONE place for Callmate brand tokens on the website.
   Copied from docs/brand/brand-tokens.css v0.2. To rebrand: change the values here and replace the SVGs
   in this folder (same file names). Marketing pages set data-theme="dark" on <html>. */
/* Callmate brand tokens - HUELVA SKYRISE LIMITED, v0.2 (2026-10-15).
   Renamed from Callwell 2026-10-15. Palette and type unchanged. EUIPO/UKIPO trade mark search pending (VERIFY).
   Dark is the token default and is ALWAYS used for marketing (landing, ads).
   The app root sets data-theme="light" by default (readable outdoors), with a dark option.
   Use: <html> = dark by default; add data-theme="light" to force light, data-theme="dark" to force dark;
   with no attribute, prefers-color-scheme: light switches to light.
   All text pairs computed against WCAG 2.x (see brand-book.md §6). */
:root {
  /* Core palette (named after the trades: flues, cables, copper pipe, limewash) */
  --brand-flue: #0B0D10;           /* night background, app-icon tile */
  --brand-soot: #15181D;           /* night surface (cards) */
  --brand-conduit: #1E222A;        /* night raised surface, sheets, inputs */
  --brand-junction: #2A2F38;       /* night decorative dividers only */
  --brand-cable: #5E6674;          /* night UI outlines (3.07:1 on soot) */
  --brand-copper: #F2994A;         /* the signal: primary on night (8.74:1 on flue). NEVER text on light */
  --brand-copper-deep: #9A4A12;    /* copper on light: links, accent text (6.25:1 on white) */
  --brand-copper-tint: #FCE8D6;    /* selected chips on light */
  --brand-copper-tint-night: #3A2416; /* selected chips on night */
  --brand-ember: #5A2A0C;          /* radial glow core only (decorative) */
  --brand-limewash: #F4F1EA;       /* day background, night text */
  --brand-white: #FFFFFF;          /* day cards */
  --brand-ink: #12151A;            /* day text, day primary button */
  --brand-slate: #566070;          /* day secondary text (6.36:1 on white) */
  --brand-fog: #A3ABB8;            /* night secondary text (7.69:1 on soot) */
  --brand-line: #E2DED6;           /* day decorative dividers only */
  --brand-stone: #878E99;          /* day UI outlines (3.30:1 on white) */

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(2.5rem, 7vw, 4.5rem);
  --fs-h1: 2rem; --fs-h2: 1.5rem; --fs-h3: 1.125rem; --fs-body: 1rem; --fs-small: .875rem; --fs-eyebrow: .75rem; --fs-kpi: 2.25rem;
  --tracking-display: -0.035em; --tracking-eyebrow: 0.18em;

  /* Shape and space */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent);

  /* Semantic: DARK (default) */
  --color-bg: var(--brand-flue);
  --color-surface: var(--brand-soot);
  --color-surface-alt: var(--brand-conduit);
  --color-glass: rgba(30, 34, 42, .62);
  --color-text: var(--brand-limewash);
  --color-text-muted: var(--brand-fog);
  --color-primary: var(--brand-copper);
  --color-primary-hover: #F6AD6B;
  --color-on-primary: var(--brand-flue);
  --color-link: var(--brand-copper);
  --color-accent: var(--brand-copper);
  --color-selected: var(--brand-copper-tint-night);
  --color-on-selected: var(--brand-limewash);
  --color-border: var(--brand-junction);
  --color-border-strong: var(--brand-cable);
  --color-success: #5FD49A;   /* recovered, won */
  --color-danger: #FF8A80;    /* at risk, overdue, lost, errors */
  --color-warning: #F5B83D;   /* needs reply soon, quoted-no-answer */
  --color-info: #7AB6F5;      /* follow-up scheduled */
  --viz-gain: #7AB6F5; --viz-loss: #FF8A80;
  --viz-1: #D9772E; --viz-2: #4A8AD6; --viz-3: #A3ABB8; --viz-4: #5FD49A;
  --glow: radial-gradient(120% 80% at 50% 0%, rgba(90, 42, 12, .85) 0%, rgba(26, 19, 16, .6) 45%, transparent 75%);
  color-scheme: dark;
}

/* Semantic: LIGHT */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: var(--brand-limewash);
    --color-surface: var(--brand-white);
    --color-surface-alt: #ECE8E0;
    --color-glass: rgba(255, 255, 255, .72);
    --color-text: var(--brand-ink);
    --color-text-muted: var(--brand-slate);
    --color-primary: var(--brand-ink);
    --color-primary-hover: #262B33;
    --color-on-primary: var(--brand-copper);
    --color-link: var(--brand-copper-deep);
    --color-accent: var(--brand-copper-deep);
    --color-selected: var(--brand-copper-tint);
    --color-on-selected: var(--brand-ink);
    --color-border: var(--brand-line);
    --color-border-strong: var(--brand-stone);
    --color-success: #1E7A4C; --color-danger: #B42318; --color-warning: #8A5700; --color-info: #1F64B0;
    --viz-gain: #1F64B0; --viz-loss: #B42318;
    --viz-1: #9A4A12; --viz-2: #1F64B0; --viz-3: #566070; --viz-4: #1E7A4C;
    --glow: radial-gradient(120% 80% at 50% 0%, rgba(242, 153, 74, .22) 0%, transparent 70%);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --color-bg: var(--brand-limewash);
  --color-surface: var(--brand-white);
  --color-surface-alt: #ECE8E0;
  --color-glass: rgba(255, 255, 255, .72);
  --color-text: var(--brand-ink);
  --color-text-muted: var(--brand-slate);
  --color-primary: var(--brand-ink);
  --color-primary-hover: #262B33;
  --color-on-primary: var(--brand-copper);
  --color-link: var(--brand-copper-deep);
  --color-accent: var(--brand-copper-deep);
  --color-selected: var(--brand-copper-tint);
  --color-on-selected: var(--brand-ink);
  --color-border: var(--brand-line);
  --color-border-strong: var(--brand-stone);
  --color-success: #1E7A4C; --color-danger: #B42318; --color-warning: #8A5700; --color-info: #1F64B0;
  --viz-gain: #1F64B0; --viz-loss: #B42318;
  --viz-1: #9A4A12; --viz-2: #1F64B0; --viz-3: #566070; --viz-4: #1E7A4C;
  --glow: radial-gradient(120% 80% at 50% 0%, rgba(242, 153, 74, .22) 0%, transparent 70%);
  color-scheme: light;
}

/* Base helpers */
.cw-num { font-variant-numeric: tabular-nums lining-nums; }
.cw-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); }
.cw-display { font-size: var(--fs-display); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.02; }
.cw-display em { font-style: italic; color: var(--color-accent); }
.cw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; border: 0; }
.cw-btn:hover { background: var(--color-primary-hover); }
.cw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--fs-small); font-weight: 600; }
.cw-ai-label { display: inline-flex; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--color-warning); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }