/*
 * DealerCentives — portable design tokens
 * --------------------------------------------------------------------------
 * Source of truth for the brand. Canonical home: docs/brand/ in the
 * dealercentives repo. Flat CSS — any DealerCentives surface can drop it
 * in with no build dependencies. Originally extracted from the portal's
 * src/styles.css (dc-dashboard-2026); consuming apps now mirror this file.
 *
 * Usage in a new project:
 *   - Copy this file into your styles directory.
 *   - @import it BEFORE your framework styles.
 *   - All brand tokens are now available as CSS custom properties.
 *
 * Spec: typography-first, premium, restrained. The brand gradient is the
 * single loud moment per view — never wash sections, never repeat per card.
 *
 * Last synced: 2026-05-14
 * --------------------------------------------------------------------------
 */

/* === FONTS ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap");

/* === TOKENS =========================================================== */
:root {
  /* Type */
  --font-sans: "Inter", "SF Pro Display", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  /* Radii — 8px ladder */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-4xl: 40px;

  /* Surfaces */
  --background: oklch(0.978 0.003 248);            /* #F7F8FA — page */
  --surface: oklch(1 0 0);                          /* #FFFFFF — card */
  --surface-alt: oklch(0.987 0.002 248);            /* #FBFBFC — alt rows */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.21 0.034 264);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.21 0.034 264);

  /* Text */
  --foreground: oklch(0.21 0.034 264);              /* #111827 */
  --muted: oklch(0.978 0.003 248);
  --muted-foreground: oklch(0.55 0.025 257);        /* #667085 */
  --secondary: oklch(0.978 0.003 248);
  --secondary-foreground: oklch(0.21 0.034 264);
  --accent: oklch(0.96 0.005 248);
  --accent-foreground: oklch(0.21 0.034 264);

  /* Brand — gradient anchors as flat tokens */
  --brand-orange: oklch(0.78 0.16 56);              /* #FF9B3D — sunrise */
  --brand-coral: oklch(0.7 0.21 25);                /* #FF5A5F — signal coral */
  --brand-pink: oklch(0.65 0.27 5);                 /* #F9387F — hot pink */
  --primary: oklch(0.7 0.21 25);                    /* default solid coral */
  --primary-foreground: oklch(0.99 0 0);

  /* The only blue in the system — switch "on" only */
  --toggle-on: oklch(0.62 0.22 256);                /* #3B82F6 */

  /* Functional status (restrained, never decorative) */
  --success: oklch(0.66 0.16 152);
  --success-foreground: oklch(0.99 0 0);
  --warning: oklch(0.79 0.16 75);
  --warning-foreground: oklch(0.21 0.034 264);
  --destructive: oklch(0.62 0.24 27);
  --destructive-foreground: oklch(0.99 0 0);
  --status-healthy: oklch(0.66 0.16 152);
  --status-degraded: oklch(0.79 0.16 75);
  --status-down: oklch(0.62 0.24 27);
  --status-idle: oklch(0.71 0.022 257);

  /* Hairlines & rings — very low contrast on purpose */
  --border: oklch(0.21 0.034 264 / 0.06);
  --border-strong: oklch(0.21 0.034 264 / 0.10);
  --input: oklch(0.21 0.034 264 / 0.08);
  --ring: oklch(0.65 0.27 5 / 0.40);

  /* Charts — orange → coral → pink → blue → green */
  --chart-1: oklch(0.78 0.16 56);
  --chart-2: oklch(0.70 0.21 25);
  --chart-3: oklch(0.65 0.27 5);
  --chart-4: oklch(0.62 0.22 256);
  --chart-5: oklch(0.66 0.16 152);

  /* Sidebar — dark, atmospheric; NEVER use for body content */
  --sidebar: oklch(0.13 0.03 264);
  --sidebar-foreground: oklch(0.99 0 0 / 0.7);
  --sidebar-primary: oklch(0.7 0.21 25);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.99 0 0 / 0.05);
  --sidebar-accent-foreground: oklch(0.99 0 0);
  --sidebar-border: oklch(0.99 0 0 / 0.06);
  --sidebar-ring: oklch(0.65 0.27 5 / 0.5);

  /* === GRADIENTS =================================================== */
  /* The brand gradient. 135°. Three stops. Never recolor, re-angle, or reorder. */
  --gradient-brand: linear-gradient(135deg, #FF9B3D 0%, #FF5A5F 55%, #F9387F 100%);
  /* Atmospheric dark sidebar gradient. Used for sidebars, dark testimonials, and footers. */
  --gradient-sidebar: linear-gradient(180deg, #050816 0%, #071326 40%, #050816 100%);

  /* === SHADOWS ===================================================== */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.03), 0 12px 32px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px rgba(15, 23, 42, 0.06);
  --shadow-primary: 0 10px 24px rgba(255, 91, 95, 0.18);
  --shadow-primary-hover: 0 14px 30px rgba(255, 91, 95, 0.28);
  --shadow-modal: 0 24px 80px rgba(15, 23, 42, 0.16);
  --shadow-sidebar-active: 0 8px 24px rgba(255, 107, 53, 0.22), 0 2px 8px rgba(255, 82, 82, 0.12);

  /* === MOTION ====================================================== */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* === BASE ============================================================ */
html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  /* Inter character variants: single-story a/g/l + slashed zero */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Editorial heading rhythm — set once, never override per component */
h1, h2, h3 { letter-spacing: -0.02em; }

/* === UTILITIES ======================================================= */
.tabular-nums { font-variant-numeric: tabular-nums; }

.bg-gradient-brand { background-image: var(--gradient-brand); }
.bg-gradient-sidebar { background-image: var(--gradient-sidebar); }

.text-gradient-brand {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shadow-card { box-shadow: var(--shadow-card); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-modal { box-shadow: var(--shadow-modal); }
.shadow-sidebar-active { box-shadow: var(--shadow-sidebar-active); }

.ease-premium { transition-timing-function: var(--ease-premium); }