/*
 * SignalSend Design Tokens
 * ────────────────────────────────────────────────────────────
 * Single source of truth for every color, shadow, border-radius
 * in the admin UI. CSS custom properties cascade automatically,
 * so theme switching becomes a 1-line attribute change.
 *
 * Two palettes:
 *   :root                    → Light theme (default)
 *   html[data-theme="dark"]  → Dark theme (Linear/Vercel-style)
 *
 * Brand accent (--accent, --accent-*) gets overridden per-brand
 * by a runtime <style> block injected into admin_template.php
 * head. The brand config's theme_accent value sets --accent for
 * urbansketch (amber), iphotography (white), isspf (red), test (indigo).
 *
 * Created 2026-05-15 as the foundation of the design system
 * restructure (Task #7). See plan at:
 * /Users/neilmk/.claude/plans/cuddly-scribbling-wren.md
 */

/* ────────────────────────────────────────────────────────────
 * LIGHT THEME (default — applied when no data-theme attribute,
 * or data-theme="light")
 * ──────────────────────────────────────────────────────────── */

:root,
html[data-theme="light"] {
  /* Surfaces */
  --surface-base:        #fafafa;  /* zinc-50, page background */
  --surface-elevated:    #ffffff;  /* white, cards/panels */
  --surface-alt:         #f4f4f5;  /* zinc-100, alt rows/hover */
  --surface-overlay:     rgba(255, 255, 255, 0.95);

  /* Borders */
  --border-default:      #e4e4e7;  /* zinc-200 */
  --border-strong:       #d4d4d8;  /* zinc-300, inputs */
  --border-focus:        var(--accent);

  /* Text */
  --text-primary:        #18181b;  /* zinc-900 */
  --text-secondary:      #52525b;  /* zinc-600 */
  --text-muted:          #71717a;  /* zinc-500 — matched to approved mockup */
  --text-inverse:        #fafafa;  /* text on dark/accent surfaces */
  --text-link:           var(--accent);

  /* Accent — SignalSend brand indigo, unified across ALL brands
     (2026-06-19 brand handoff). The old per-brand accent override
     ({BRAND_ACCENT} injection in admin_template.php) was removed so every
     instance wears the one SignalSend identity. This is now the SINGLE
     source of truth for the product accent — change it HERE (and the dark
     value below). Indigo = brand / interactive ONLY; the green/red/amber/
     blue status colours below stay reserved for status and must never
     become the accent. */
  --accent:              #6f7bff;  /* SignalSend indigo */
  --accent-hover:        #5563e6;  /* hover / pressed */
  --accent-bg:           #eceeff;  /* tinted surface, selected rows */
  --accent-contrast:     #ffffff;  /* text/icon on accent buttons */

  /* Logo wordmark gradient — dark ink → indigo on light surfaces */
  --logo-from:           #1a1d22;
  --logo-to:             #6f7bff;
  /* Brand bar — indigo gradient behind the top org bar */
  --brand-bar-bg:        linear-gradient(90deg, #7b86ff, #4a3f9e);

  /* Status — semantic colors for badges, banners, indicators */
  --status-success:      #16a34a;  /* green-600 */
  --status-success-bg:   #f0fdf4;  /* green-50 */
  --status-success-border: #86efac; /* green-300 */
  --status-error:        #dc2626;  /* red-600 */
  --status-error-bg:     #fef2f2;  /* red-50 */
  --status-error-border: #fca5a5;  /* red-300 */
  --status-warning:      #c2410c;  /* orange-700 — deepened from orange-600 so "caution"
                                       separates by VALUE from the amber-600 brand accent
                                       (#d97706). The old orange-600 sat one step off the
                                       UrbanSketch accent in both hue and lightness, so a
                                       warning state and an action button read as the same
                                       colour. Burnt orange also lifts text contrast on the
                                       light surface from ~3.9:1 to ~4.9:1. */
  --status-warning-bg:   #fff7ed;  /* orange-50 */
  --status-warning-border: #fdba74; /* orange-300 */
  --status-info:         #2563eb;  /* blue-600 */
  --status-info-bg:      #eff6ff;  /* blue-50 */
  --status-info-border:  #93c5fd;  /* blue-300 */

  /* Code / monospace */
  --code-text:           #be185d;  /* pink-700, readable on light bg */
  --code-bg:             #fdf2f8;  /* pink-50 */

  /* Shadows */
  --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:           0 12px 48px rgba(0, 0, 0, 0.12);
  --shadow-focus:        0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);

  /* Border radius */
  --radius-sm:           4px;
  --radius-md:           6px;
  --radius-lg:           10px;
  --radius-pill:         9999px;

  /* Typography — Inter is the de-facto modern web app font (Linear,
     Vercel, Stripe, Notion). Designed for screen legibility at small
     sizes. Loaded from Google Fonts in the template head; system
     fallback chain handles offline / failed-load gracefully. */
  --font-sans:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:           "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", "Courier New", monospace;

  /* Type scale — calibrated to approved mockup density.
     14px base reads as professional Linear/Vercel/Stripe density
     without feeling cramped. Inter's optical sizing keeps it legible. */
  --font-size-xs:        11px;   /* eyebrow labels, KPI captions */
  --font-size-sm:        12px;   /* small captions, footnotes */
  --font-size-md:        13px;   /* secondary body, table cells */
  --font-size-base:      14px;   /* default body text */
  --font-size-lg:        15px;   /* card titles, emphasised body */
  --font-size-xl:        18px;   /* h3 / section headers */
  --font-size-2xl:       22px;   /* h2 */
  --font-size-3xl:       28px;   /* h1 / page titles */
  --font-size-4xl:       32px;   /* KPI hero numbers */
  --font-size-5xl:       56px;   /* health score hero numbers */

  --line-height-tight:   1.25;   /* headings */
  --line-height-base:    1.5;    /* body text */
  --line-height-relaxed: 1.65;   /* long-form / readable copy */

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
}

/* ────────────────────────────────────────────────────────────
 * DARK THEME (Linear/Vercel-style — sharper than the old
 * purple-tinted dark theme)
 * ──────────────────────────────────────────────────────────── */

html[data-theme="dark"] {
  /* Surfaces — matched exactly to approved mockup */
  --surface-base:        #09090b;  /* zinc-950, page background */
  --surface-elevated:    #18181b;  /* zinc-900, cards/panels */
  --surface-alt:         #27272a;  /* zinc-800, alt rows/hover */
  --surface-overlay:     rgba(24, 24, 27, 0.95);

  /* Borders */
  --border-default:      #27272a;  /* zinc-800 */
  --border-strong:       #3f3f46;  /* zinc-700, inputs */
  --border-focus:        var(--accent);

  /* Text */
  --text-primary:        #fafafa;  /* zinc-50 */
  --text-secondary:      #a1a1aa;  /* zinc-400 */
  --text-muted:          #71717a;  /* zinc-500 */
  --text-inverse:        #18181b;  /* text on light surfaces */
  --text-link:           var(--accent);

  /* Accent — brighter SignalSend indigo for dark surfaces. Dark ink on
     accent buttons keeps button labels legible on the lighter indigo;
     the brand bar carries its own white ink (it has a dark indigo
     gradient, set in signalflux-design.css). */
  --accent:              #8b95ff;  /* SignalSend indigo (dark) */
  --accent-hover:        #6f7bff;  /* hover / pressed */
  --accent-bg:           rgba(111, 123, 255, 0.16);  /* tinted surface */
  --accent-contrast:     #18181b;  /* text on accent buttons */

  /* Logo wordmark gradient — near-white → indigo on dark surfaces */
  --logo-from:           #f4f8fc;
  --logo-to:             #8b95ff;
  /* Brand bar — deep indigo gradient on dark */
  --brand-bar-bg:        linear-gradient(90deg, #3a3170, #241f4a);

  /* Status — dimmer/darker bg, brighter foreground for dark theme */
  --status-success:      #34d399;  /* green-400 */
  --status-success-bg:   #052e16;  /* green-950 */
  --status-success-border: #166534; /* green-800 */
  --status-error:        #f87171;  /* red-400 */
  --status-error-bg:     #450a0a;  /* red-950 */
  --status-error-border: #991b1b;  /* red-800 */
  --status-warning:      #fb923c;  /* orange-400 */
  --status-warning-bg:   #431407;  /* orange-950 */
  --status-warning-border: #9a3412; /* orange-800 */
  --status-info:         #60a5fa;  /* blue-400 */
  --status-info-bg:      #172554;  /* blue-950 */
  --status-info-border:  #1e40af;  /* blue-800 */

  /* Code */
  --code-text:           #f472b6;  /* pink-400 */
  --code-bg:             #500724;  /* pink-950 */

  /* Shadows — slightly more pronounced for depth on dark */
  --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:           0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-focus:        0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ────────────────────────────────────────────────────────────
 * GLOBAL BASE STYLES — minimal, just ensures the tokens take
 * effect at the root level so legacy CSS inherits correctly.
 * Everything else lives in the layered CSS that gets refactored
 * to reference these tokens.
 * ──────────────────────────────────────────────────────────── */

html, body {
  background: var(--surface-base);
  color: var(--text-primary);
  /* Typography — these use !important because legacy CSS sets
     font-family: Tahoma/Arial throughout. The whole point of the
     restructure is to escape that, and typography is a global concern
     not a per-component one. */
  font-family: var(--font-sans) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Better letter shapes at small sizes (Inter's optical sizing) */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}

/* Override the legacy ~12px Arial/Tahoma defaults in nested elements */
body, body *, input, button, select, textarea {
  font-family: var(--font-sans) !important;
}

/* Body text in tables — ensure dense pages stay readable */
table, td, th, li, p, span, div {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Smaller / utility text uses the explicit scale */
.text-xs, small, .small, .caption, .hint { font-size: var(--font-size-xs); line-height: var(--line-height-base); }
.text-sm, .secondary { font-size: var(--font-size-md); line-height: var(--line-height-base); }
.text-lg { font-size: var(--font-size-lg); line-height: var(--line-height-base); }

/* Headings — calibrated to mockup */
h1 { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); letter-spacing: -0.5px; }
h2 { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); letter-spacing: -0.3px; }
h3 { font-size: var(--font-size-xl);  line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); letter-spacing: -0.2px; }
h4 { font-size: var(--font-size-lg);  line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-base); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-md);  line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }

/* Monospace — code, inputs holding keys/IDs */
code, pre, .mono, .code { font-family: var(--font-mono) !important; }

/* Smooth theme transitions — only on colors, not layout */
html, body, * {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

/* Disable transitions on initial page load to prevent flash */
html.no-transitions * {
  transition: none !important;
}