/* ==========================================================================
   Testimonic - design tokens (single source of truth)
   Loaded before app.css on every page (dashboard, admin, marketing, auth).
   Rule: components consume these tokens, never raw hex. The only allowed raw
   colours in the app are (1) dynamic business branding accents, (2) QR image
   colours, (3) Chart.js datasets, and (4) HTML email bodies, which cannot read
   CSS variables.
   ========================================================================== */
/* Self-hosted Inter (variable, latin). Loaded here so every area shares one font file; preloaded from the
   headers. "Inter Fallback" is Arial with Inter's metrics, so text set in the fallback occupies the same
   space and the swap causes no layout shift. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2?v=2") format("woff2");   /* bump ?v= whenever the font file or its headers change: the file is cached for a year */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }

:root {
  /* ---- Colour primitives (private scale; reference via the semantic tokens below) ---- */
  --c-petrol-50: #e6f3f5;
  --c-petrol-100: #cfe7eb;
  --c-petrol-600: #0f6b7a;     /* brand petrol: 5.9:1 with white text */
  --c-petrol-700: #0b5561;     /* links, hover: 8.2:1 on white */
  --c-petrol-800: #083f48;
  --c-petrol-950: #0c2a30;     /* dark surfaces: sidebar, CTA band */
  --c-marigold-500: #f4b942;   /* marigold accent, decorative only (1.9:1, never for text) */
  --c-marigold-100: #fdf1d4;
  --c-slate-50: #f8fafc;
  --c-slate-100: #f1f5f9;
  --c-slate-200: #e5e7eb;
  --c-slate-300: #cbd5e1;
  --c-slate-400: #94a3b8;
  --c-slate-500: #5f6b80;   /* muted text; darkened from #64748b to meet WCAG AA (>=4.5:1) on page and pill backgrounds */
  --c-slate-700: #334155;
  --c-slate-900: #0f172a;
  --c-white: #ffffff;
  --mask-ink: #000;   /* opaque stencil for CSS mask alpha, not a palette colour */
  --c-green-100: #dcfce7;
  --c-green-600: #16a34a;
  --c-green-800: #166534;
  --c-amber-50: #fffbeb;
  --c-amber-100: #fef3c7;
  --c-amber-200: #fde68a;
  --c-amber-500: #f59e0b;
  --c-amber-600: #d97706;
  --c-amber-800: #92400e;
  --c-amber-900: #78350f;
  --c-red-100: #fee2e2;
  --c-red-500: #ef4444;
  --c-red-600: #dc2626;
  --c-red-700: #b91c1c;
  --c-red-800: #991b1b;
  --c-blue-100: #dbeafe;
  --c-blue-600: #2563eb;
  --c-blue-800: #1e40af;
  --c-indigo-200: #c7d2fe;
  --c-indigo-500: #6366f1;
  --c-indigo-950: #1e1b4b;

  /* ---- Brand (Testimonic petrol + marigold accent) ---- */
  --primary: var(--c-petrol-600);
  --primary-hover: var(--c-petrol-700);
  --primary-soft: var(--c-petrol-50);
  --primary-soft-2: var(--c-petrol-100);
  --on-primary: var(--c-white);
  --primary-rgb: 15, 107, 122;          /* for rgba() rings and overlays */
  --accent: var(--c-marigold-500);      /* decorative warmth: gradients, marks, highlights, the star */
  --accent-soft: var(--c-marigold-100);
  --accent-rgb: 244, 185, 66;
  --brand-gradient: linear-gradient(135deg, var(--c-petrol-700) 0%, var(--c-petrol-600) 55%, var(--c-marigold-500) 100%);

  --secondary: var(--c-petrol-950);     /* dark brand surface used for emphasis (sidebar, CTA band) */
  --on-secondary: var(--c-white);

  /* Link: a deeper shade of the brand (never plain blue). */
  --link: var(--c-petrol-700);          /* #0b5561, 8.2:1 on white */
  --link-hover: var(--c-petrol-800);
  --link-rgb: 11, 85, 97;
  --link-hover-rgb: 8, 63, 72;

  /* ---- Status ---- */
  --success: var(--c-green-600);
  --success-soft: var(--c-green-100);
  --success-ink: var(--c-green-800);
  --warning: var(--c-amber-600);
  --warning-soft: var(--c-amber-100);
  --warning-ink: var(--c-amber-800);
  --danger: var(--c-red-700);
  --danger-soft: var(--c-red-100);
  --danger-ink: var(--c-red-800);
  --info: var(--c-blue-600);
  --info-soft: var(--c-blue-100);
  --info-ink: var(--c-blue-800);
  --star: var(--c-amber-500);           /* rating stars */

  /* ---- Text ---- */
  --text-primary: var(--c-slate-900);
  --text-secondary: var(--c-slate-700);
  --text-muted: var(--c-slate-500);
  --text-on-dark: var(--c-white);
  --text-on-dark-muted: var(--c-slate-300);

  /* ---- Surfaces ---- */
  --surface: var(--c-white);            /* cards, inputs, nav */
  --surface-2: var(--c-slate-50);       /* subtle raised / hover fills */
  --surface-3: var(--c-slate-100);      /* pills, code chips, track backgrounds */
  --surface-page: #f6f9fa;              /* app background, faint cool tint */
  --surface-dark: var(--c-petrol-950);  /* dashboard sidebar, phone mockups */
  --surface-admin: var(--c-indigo-950); /* platform admin sidebar */

  /* ---- Borders ---- */
  --border: var(--c-slate-200);
  --border-strong: var(--c-slate-300);
  --focus-ring: rgba(15, 107, 122, .35);   /* keyboard focus outline / input ring */
  --primary-veil: rgba(15, 107, 122, .45);  /* strong brand fill over dark (active nav) */
  --primary-veil-soft: rgba(15, 107, 122, .2); /* soft brand ring on light (selected card) */
  --overlay: rgba(15, 23, 42, .45);        /* modal / drawer scrim */
  --hover-on-dark: rgba(255, 255, 255, .06); /* hover fill on dark surfaces */
  --hover-on-primary: rgba(255, 255, 255, .12);
  --border-on-primary: rgba(255, 255, 255, .6);
  --text-on-primary-muted: rgba(255, 255, 255, .88);
  --admin-nav-active: rgba(129, 140, 248, .35);

  /* ---- Typography scale ---- */
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;

  --fs-display: clamp(2rem, 4.6vw, 3rem);   /* 32-48px hero */
  --fs-h1: 1.5rem;      /* 24px page titles */
  --fs-h2: clamp(1.375rem, 3vw, 2rem);      /* 22-32px section titles */
  --fs-h3: 1.125rem;    /* 18px */
  --fs-h4: 1rem;        /* 16px */
  --fs-body: 0.90625rem;/* 14.5px base */
  --fs-body-lg: 1.125rem;/* 18px lead */
  --fs-small: 0.8125rem;/* 13px */
  --fs-caption: 0.75rem;/* 12px */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.08em;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --shadow-xl: 0 24px 50px rgba(15, 23, 42, .16);

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* ---- Motion (three durations only) ---- */
  --dur-fast: 150ms;
  --dur-med: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- Z-index scale ---- */
  --z-sticky: 20;
  --z-dropdown: 30;
  --z-drawer: 1045;
  --z-flash: 2000;

  /* ---- Back-compat aliases (existing components keep working) ---- */
  --fr-primary: var(--primary);
  --fr-primary-600: var(--primary-hover);
  --fr-primary-50: var(--primary-soft);
  --fr-ink: var(--text-primary);
  --fr-ink-2: var(--text-secondary);
  --fr-muted: var(--text-muted);
  --fr-line: var(--border);
  --fr-bg: var(--surface-page);
  --fr-card: var(--surface);
  --fr-sidebar: var(--surface-dark);
  --fr-sidebar-ink: var(--text-on-dark-muted);
  --fr-radius: var(--radius-md);
  --fr-shadow: var(--shadow-sm);
  --fr-font: var(--font-sans);
  --fr-ease: var(--ease);
  --fr-fast: var(--dur-fast);
  --fr-med: var(--dur-med);

  /* ---- Bootstrap bridge ---- */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--surface-page);
  --bs-border-color: var(--border);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-link-color-rgb: var(--link-rgb);
  --bs-link-hover-color-rgb: var(--link-hover-rgb);
}

/* ==========================================================================
   Typography utilities. Apply a single class to get a consistent role; no
   arbitrary font sizes elsewhere.
   ========================================================================== */
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-body); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-body); letter-spacing: var(--ls-wide); }
.t-eyebrow { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }