/* ============================================================
   Brouky Design System — Colors & Type
   Source: brouky.tech (Next.js + Tailwind v4, oklch tokens)
   ============================================================ */

@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand ---------- */
  --brouky-orange:        #ec5b13;            /* primary — logo + CTA */
  --brouky-orange-light:  #f27c38;            /* primary-container */
  --brouky-orange-50:     oklch(0.97 0.03 40);
  --brouky-orange-100:    oklch(0.93 0.07 40);
  --brouky-orange-500:    oklch(0.54 0.18 40);
  --brouky-orange-600:    oklch(0.5  0.19 40);
  --brouky-ink:           #1a1a2e;            /* "Brouky" wordmark color, themeColor */

  /* ---------- Surfaces (light) ---------- */
  --background:           oklch(0.99 0.002 0);
  --foreground:           oklch(0.15 0.01 260);
  --card:                 oklch(1 0 0);
  --card-foreground:      oklch(0.15 0.01 260);
  --popover:              oklch(1 0 0);
  --muted:                oklch(0.97 0.002 260);
  --muted-foreground:     oklch(0.5  0.01 260);
  --accent:               oklch(0.95 0.005 260);
  --secondary:            oklch(0.96 0.003 260);
  --border:               oklch(0.92 0.003 260);
  --input:                oklch(0.96 0.002 260);
  --ring:                 var(--brouky-orange-500);

  /* Editorial-Analyst surface tonal layering */
  --surface:                  rgb(247 249 251);
  --surface-container-lowest: rgb(255 255 255);
  --surface-container-low:    rgb(245 247 249);
  --surface-container:        rgb(240 242 245);
  --surface-container-high:   rgb(235 237 240);
  --on-surface:               rgb(25 28 30);
  --on-surface-variant:       rgb(79 85 92);
  --outline-variant:          rgb(190 195 200);

  /* ---------- Semantic ---------- */
  --primary:                  oklch(0.54 0.18 40);   /* orange */
  --primary-foreground:       oklch(0.98 0 0);
  --destructive:              oklch(0.55 0.20 25);
  --destructive-foreground:   oklch(0.98 0 0);
  --success:                  oklch(0.70 0.18 155);
  --success-foreground:       oklch(0.98 0 0);
  --warning:                  oklch(0.75 0.15 80);
  --warning-foreground:       oklch(0.20 0 0);
  --info:                     oklch(0.60 0.20 280);

  /* ---------- Multi-color chart palette (vibrant) ---------- */
  --chart-1: oklch(0.54 0.18 40);    /* orange */
  --chart-2: oklch(0.65 0.20 250);   /* indigo / purple-blue */
  --chart-3: oklch(0.70 0.18 165);   /* emerald / teal */
  --chart-4: oklch(0.75 0.15 80);    /* amber */
  --chart-5: oklch(0.60 0.20 280);   /* violet */

  /* tailwind-aligned accent ramps used widely in UI */
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --indigo-500:  #6366f1;
  --indigo-600:  #4f46e5;
  --indigo-700:  #4338ca;
  --amber-500:   #f59e0b;
  --amber-600:   #d97706;
  --violet-500:  #8b5cf6;
  --rose-500:    #f43f5e;
  --sky-500:     #0ea5e9;
  --fuchsia-500: #d946ef;

  /* slate (neutrals — text + chrome) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* marketing background gradient swatch (legacy redesign) */
  --bg-light: #f8f6f6;
  --bg-dark:  #221610;

  /* ---------- Radius scale ---------- */
  --radius:     0.5rem;       /* lg — default cards (rounded-xl in tailwind) */
  --radius-sm:  calc(var(--radius) - 4px);
  --radius-md:  calc(var(--radius) - 2px);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) + 4px);   /* 0.75rem — cards, inputs */
  --radius-2xl: 1rem;                         /* feature cards */
  --radius-3xl: 1.5rem;                       /* hero panels */
  --radius-full: 9999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-xs:       0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-premium:  0 1px 3px 0 rgb(0 0 0 / 0.03), 0 1px 2px -1px rgb(0 0 0 / 0.03);
  --shadow-sm:       0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md:       0 4px 12px -2px rgb(0 0 0 / 0.06);
  --shadow-lg:       0 10px 24px -4px rgb(0 0 0 / 0.08);
  --shadow-xl:       0 20px 40px -8px rgb(15 23 42 / 0.10);
  --shadow-ambient:    0 8px 24px -4px rgb(25 28 30 / 0.06);
  --shadow-ambient-lg: 0 16px 48px -8px rgb(25 28 30 / 0.08);
  /* "shadow-lg shadow-primary/20" — tinted CTA glow */
  --shadow-primary-glow: 0 10px 24px -6px oklch(0.54 0.18 40 / 0.30);

  /* ---------- Typography ---------- */
  --font-sans:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Jost', system-ui, sans-serif;

  /* type scale */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.5rem;    /* 72 */

  /* weights actually loaded */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* tracking */
  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.025em;
  --tracking-widest:    0.16em;

  /* leading */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* spacing scale (tailwind 4 default) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
}

/* ---------- Dark theme (deep slate + purple-blue) ---------- */
.dark, [data-theme="dark"] {
  --background:        oklch(0.13 0.005 260);
  --foreground:        oklch(0.95 0 0);
  --card:              oklch(0.17 0.005 260);
  --card-foreground:   oklch(0.95 0 0);
  --muted:             oklch(0.22 0.005 260);
  --muted-foreground:  oklch(0.60 0 0);
  --accent:            oklch(0.25 0.01 260);
  --secondary:         oklch(0.22 0.005 260);
  --border:            oklch(0.25 0.005 260);
  --input:             oklch(0.22 0.005 260);
  --primary:           oklch(0.65 0.20 40);
  --ring:              oklch(0.65 0.20 40);
  --bg-light:          var(--bg-dark);
}

/* ============================================================
   Semantic type roles — drop-in classes that match Brouky usage
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--foreground);
  background: var(--background);
}

.brk-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, var(--text-7xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.brk-h1 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.brk-h2 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.brk-h3 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.brk-h4 { font-size: var(--text-xl);  font-weight: 700; line-height: var(--leading-snug); }
.brk-lede   { font-size: var(--text-lg); font-weight: 400; color: var(--muted-foreground); line-height: var(--leading-relaxed); }
.brk-body   { font-size: var(--text-base); font-weight: 400; line-height: var(--leading-normal); }
.brk-small  { font-size: var(--text-sm);  font-weight: 500; line-height: var(--leading-normal); }
.brk-caption{ font-size: var(--text-xs);  font-weight: 500; color: var(--muted-foreground); }
.brk-eyebrow{
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.brk-mono { font-family: var(--font-mono); font-size: var(--text-sm); }

/* common utility shortcuts */
.brk-gradient-text {
  background: linear-gradient(90deg, var(--chart-1), var(--chart-2), var(--chart-5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brk-shadow-cta { box-shadow: var(--shadow-primary-glow); }
.brk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  background: oklch(0.54 0.18 40 / 0.10);
  border: 1px solid oklch(0.54 0.18 40 / 0.20);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}