/* ──────────────────────────────────────────────────────────────────────────────
   TruCreatives UI · design tokens · v1.0 (Oct 2026)
   The same look as TruCRM and trucreatives.com. Plain CSS custom properties:
   works in any web app. Light is the default; dark turns on with class="dark"
   or data-theme="dark" on <html> (data-theme="system" follows the OS).
   ────────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@500,700,900&display=swap");

:root {
  /* ── type ── */
  --tru-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tru-font-display: "Satoshi", "Inter", system-ui, sans-serif;   /* headings, big numbers */
  --tru-font-ui: "Poppins", "Inter", system-ui, sans-serif;        /* pills and steppers */
  --tru-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* 01 02 03 */
  --tru-text-2xs: 10.5px;  /* eyebrow labels, uppercase, .14em tracking */
  --tru-text-xs: 12px;
  --tru-text-sm: 13px;     /* buttons, chips, pills */
  --tru-text-base: 14px;   /* app body */
  --tru-text-md: 16px;
  --tru-text-lg: 20px;
  --tru-text-xl: 24px;     /* board / screen title */
  --tru-text-2xl: 36px;    /* page title */
  --tru-text-3xl: 48px;    /* marketing hero */

  /* ── brand constants (identical in both themes) ── */
  --tru-blue: #6db2ff;        /* oklch(0.78 0.2 262), gradient start, active fills */
  --tru-cyan: #3fd6ff;        /* oklch(0.82 0.14 225), gradient middle */
  --tru-cyan-soft: #7fd3f2;   /* labels and outline chips on dark */
  --tru-deep-blue: #2c488e;   /* oklch(0.42 0.12 265), gradient tail */
  --tru-primary-500: #2374f6; /* light-theme primary */
  --tru-primary-400: #3b83f7; /* dark-theme primary */
  --tru-navy: #080d18;        /* oklch(0.16 0.025 265), site background */

  /* ring / step colours, in the order the site uses them */
  --tru-green: #22c55e;
  --tru-ring-blue: #3b82f6;
  --tru-ring-cyan: #22d3ee;
  --tru-orange: #f97316;
  --tru-indigo: #6366f1;
  --tru-teal: #14b8a6;
  --tru-pink: #ec4899;
  --tru-amber: #f59e0b;

  /* signals */
  --tru-success: #22c55e;
  --tru-warning: #f59e0b;
  --tru-danger: #e63737;
  --tru-live: #6dff7a;        /* oklch(0.9 0.22 145), "LIVE" badges */
  --tru-gold: #ffc24b;

  /* ── gradients ── */
  --tru-gradient-text: linear-gradient(110deg, oklch(0.78 0.2 262) 0%, oklch(0.82 0.14 225) 45%, oklch(0.6 0.15 265) 78%, oklch(0.78 0.2 262) 100%);
  --tru-gradient-brand: linear-gradient(120deg, oklch(0.78 0.2 262), oklch(0.82 0.14 225));
  --tru-gradient-orb: radial-gradient(circle at 34% 32%, rgba(255,255,255,.85) 0 14%, transparent 16%), linear-gradient(135deg, oklch(0.78 0.2 262), oklch(0.82 0.14 225));
  --tru-gradient-connector: linear-gradient(90deg, var(--tru-green), var(--tru-ring-blue), var(--tru-ring-cyan), var(--tru-orange), var(--tru-ring-blue), var(--tru-green));

  /* ── shape ── */
  --tru-radius-pill: 6px;     /* stepper pills, outline chips */
  --tru-radius-rail: 13px;    /* the glass rail around pills */
  --tru-radius-sm: 10px;
  --tru-radius-md: 14px;      /* inputs, inner cards */
  --tru-radius-lg: 20px;      /* frames, tables, panels */
  --tru-radius-full: 9999px;  /* buttons, chips, badges, rings */
  --tru-space: 4px;           /* spacing unit: 4, 8, 12, 16, 24, 32, 48 */
  --tru-ease: cubic-bezier(.2, .8, .2, 1);

  /* ── theme: LIGHT (HSL channels, drop-in compatible with shadcn/ui) ── */
  --background: 220 33% 97%;       /* #f5f7fa */
  --foreground: 224 40% 12%;       /* #12192b */
  --card: 0 0% 100%;               /* #ffffff */
  --card-foreground: 224 40% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 40% 12%;
  --primary: 217 92% 55%;          /* #2374f6 */
  --primary-foreground: 0 0% 100%;
  --secondary: 220 28% 94%;
  --secondary-foreground: 224 40% 12%;
  --muted: 220 28% 94%;            /* #ebeef4 */
  --muted-foreground: 220 14% 46%; /* #657086 */
  --accent: 217 92% 55%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 78% 56%;        /* #e63737 */
  --destructive-foreground: 0 0% 100%;
  --border: 220 22% 88%;           /* #dadee7 */
  --input: 220 22% 88%;
  --ring: 217 92% 55%;
  --radius: 0.875rem;

  /* component surfaces, light */
  --tru-label: hsl(var(--primary));
  --tru-rail-bg: hsl(var(--card) / 0.8);
  --tru-rail-border: hsl(var(--border) / 0.8);
  --tru-rail-shadow: 0 10px 30px -18px rgba(0,0,0,.45);
  --tru-pill-active-bg: hsl(var(--primary) / 0.22);
  --tru-frame-bg: linear-gradient(165deg, hsl(var(--card)) 0%, hsl(var(--muted) / 0.6) 100%);
  --tru-frame-border: hsl(var(--border) / 0.8);
  --tru-frame-shadow: 0 0 50px hsl(var(--primary) / 0.10), 0 18px 50px -24px rgba(0,0,0,.35);
  --tru-card-bg: hsl(var(--card));
  --tru-card-border: hsl(var(--border));
  --tru-btn-bg: linear-gradient(120deg, hsl(var(--primary)), hsl(199 89% 60%));
  --tru-btn-color: #fff;
  --tru-btn-border: hsl(var(--primary) / 0.45);
  --tru-btn-shadow: 0 0 30px hsl(var(--primary) / 0.35);
  --tru-chip-bg: hsl(var(--background) / 0.6);
  --tru-chip-border: hsl(var(--border));
  --tru-chip-color: hsl(var(--foreground) / 0.9);
  --tru-outline-bg: hsl(var(--card) / 0.7);
  --tru-outline-color: hsl(var(--primary));
  --tru-outline-ring: hsl(var(--primary) / 0.18);
  --tru-table-head: linear-gradient(180deg, hsl(var(--primary) / 0.14), hsl(var(--primary) / 0.06));
  --tru-ambient: radial-gradient(1200px 600px at 80% -10%, hsl(var(--primary) / 0.10), transparent 60%);
}

/* ── theme: DARK (the trucreatives.com look) ── */
.dark, [data-theme="dark"] {
  --background: 226 45% 6%;        /* #080c16 */
  --foreground: 214 32% 92%;       /* #e4eaf1 */
  --card: 226 38% 9%;              /* #0e1220 */
  --card-foreground: 214 32% 92%;
  --popover: 226 38% 9%;
  --popover-foreground: 214 32% 92%;
  --primary: 217 92% 60%;          /* #3b83f7 */
  --primary-foreground: 0 0% 100%;
  --secondary: 226 30% 14%;
  --secondary-foreground: 214 32% 92%;
  --muted: 226 30% 14%;            /* #191e2e */
  --muted-foreground: 218 20% 64%; /* #919eb6 */
  --accent: 217 92% 60%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 226 26% 16%;           /* #1e2333 */
  --input: 226 26% 16%;
  --ring: 217 92% 60%;

  --tru-label: var(--tru-cyan-soft);
  --tru-rail-bg: rgba(0,0,0,.45);
  --tru-rail-border: rgba(255,255,255,.12);
  --tru-rail-shadow: 0 12px 40px rgba(0,0,0,.45);
  --tru-pill-active-bg: hsl(var(--primary) / 0.35);
  --tru-frame-bg: linear-gradient(165deg, oklch(0.2 0.04 280 / 0.5), oklch(0.12 0.03 265 / 0.85));
  --tru-frame-border: rgba(255,255,255,.12);
  --tru-frame-shadow: 0 0 50px oklch(0.45 0.14 262 / 0.18);
  --tru-card-bg: oklch(0.18 0.03 265 / 0.55);
  --tru-card-border: oklch(1 0 0 / 0.1);
  --tru-btn-bg: linear-gradient(oklch(0.2 0.04 262 / 0.85), oklch(0.14 0.03 265 / 0.85));
  --tru-btn-color: #fff;
  --tru-btn-border: oklch(0.78 0.2 262 / 0.45);
  --tru-btn-shadow: 0 0 30px oklch(0.5 0.16 262 / 0.28);
  --tru-chip-bg: rgba(255,255,255,.04);
  --tru-chip-border: rgba(255,255,255,.15);
  --tru-chip-color: #fff;
  --tru-outline-bg: rgba(0,0,0,.4);
  --tru-outline-color: var(--tru-cyan-soft);
  --tru-outline-ring: rgba(127,211,242,.3);
  --tru-table-head: linear-gradient(180deg, rgba(127,211,242,.10), rgba(127,211,242,.03));
  --tru-ambient: radial-gradient(1200px 700px at 80% -10%, oklch(0.45 0.14 262 / 0.28), transparent 60%), radial-gradient(900px 600px at 0% 110%, oklch(0.5 0.12 225 / 0.14), transparent 60%);
}

/* Opt-in: follow the operating system with <html data-theme="system"> */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --background: 226 45% 6%; --foreground: 214 32% 92%; --card: 226 38% 9%; --card-foreground: 214 32% 92%;
    --popover: 226 38% 9%; --popover-foreground: 214 32% 92%; --primary: 217 92% 60%; --secondary: 226 30% 14%;
    --secondary-foreground: 214 32% 92%; --muted: 226 30% 14%; --muted-foreground: 218 20% 64%; --accent: 217 92% 60%;
    --destructive: 0 70% 55%; --border: 226 26% 16%; --input: 226 26% 16%; --ring: 217 92% 60%;
    --tru-label: var(--tru-cyan-soft); --tru-rail-bg: rgba(0,0,0,.45); --tru-rail-border: rgba(255,255,255,.12);
    --tru-rail-shadow: 0 12px 40px rgba(0,0,0,.45); --tru-pill-active-bg: hsl(var(--primary) / 0.35);
    --tru-frame-bg: linear-gradient(165deg, oklch(0.2 0.04 280 / 0.5), oklch(0.12 0.03 265 / 0.85));
    --tru-frame-border: rgba(255,255,255,.12); --tru-frame-shadow: 0 0 50px oklch(0.45 0.14 262 / 0.18);
    --tru-card-bg: oklch(0.18 0.03 265 / 0.55); --tru-card-border: oklch(1 0 0 / 0.1);
    --tru-btn-bg: linear-gradient(oklch(0.2 0.04 262 / 0.85), oklch(0.14 0.03 265 / 0.85));
    --tru-btn-border: oklch(0.78 0.2 262 / 0.45); --tru-btn-shadow: 0 0 30px oklch(0.5 0.16 262 / 0.28);
    --tru-chip-bg: rgba(255,255,255,.04); --tru-chip-border: rgba(255,255,255,.15); --tru-chip-color: #fff;
    --tru-outline-bg: rgba(0,0,0,.4); --tru-outline-color: var(--tru-cyan-soft); --tru-outline-ring: rgba(127,211,242,.3);
    --tru-table-head: linear-gradient(180deg, rgba(127,211,242,.10), rgba(127,211,242,.03));
    --tru-ambient: radial-gradient(1200px 700px at 80% -10%, oklch(0.45 0.14 262 / 0.28), transparent 60%), radial-gradient(900px 600px at 0% 110%, oklch(0.5 0.12 225 / 0.14), transparent 60%);
  }
}