/* Stencil Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
/* /Stencil Fonts */

:root {
  /* ── shadcn base tokens ───────────────────────────────────────── */
  --background: oklch(98.2% 0.014 95);
  --foreground: oklch(26% 0.06 258);
  --card: oklch(99.3% 0.008 95);
  --card-foreground: oklch(26% 0.06 258);
  --popover: oklch(99.3% 0.008 95);
  --popover-foreground: oklch(26% 0.06 258);
  --primary: #B45309;
  --primary-foreground: oklch(99% 0.01 95);
  --secondary: oklch(56% 0.09 200);
  --secondary-foreground: oklch(99% 0.01 95);
  --muted: oklch(94% 0.018 95);
  --muted-foreground: oklch(45% 0.035 258);
  --accent: oklch(93% 0.03 200);
  --accent-foreground: oklch(26% 0.06 258);
  --destructive: oklch(60% 0.20 25);
  --destructive-foreground: oklch(99% 0.01 95);
  --border: oklch(85% 0.02 95);
  --input: oklch(85% 0.02 95);
  --ring: oklch(56% 0.09 200);
  --success: oklch(68% 0.15 145);
  --warning: oklch(80% 0.15 85);
  --chart-1: oklch(60% 0.15 55);
  --chart-2: oklch(58% 0.10 200);
  --chart-3: oklch(65% 0.18 20);
  --chart-4: oklch(55% 0.15 300);
  --chart-5: oklch(65% 0.14 145);
  --sidebar: oklch(96.5% 0.016 95);
  --sidebar-foreground: oklch(26% 0.06 258);
  --sidebar-primary: #b45309;
  --sidebar-primary-foreground: oklch(99% 0.01 95);
  --sidebar-accent: oklch(93% 0.03 200);
  --sidebar-accent-foreground: oklch(26% 0.06 258);
  --sidebar-border: oklch(85% 0.02 95);
  --sidebar-ring: oklch(56% 0.09 200);

  /* ── surface hierarchy ────────────────────────────────────────── */
  --background-secondary: oklch(96% 0.018 95);
  --surface-hover: oklch(93% 0.03 200);
  --surface-active: oklch(89% 0.04 200);
  --surface-elevated: oklch(99.5% 0.006 95);

  /* ── border hierarchy ─────────────────────────────────────────── */
  --border-subtle: oklch(91% 0.015 95);
  --border-muted: oklch(86% 0.02 95);
  --border-strong: oklch(65% 0.03 258);

  /* ── text hierarchy ───────────────────────────────────────────── */
  --foreground-secondary: oklch(42% 0.045 258);

  /* ── primary depth (hover/tint states for brand colour) ─────── */
  --primary-hover: #944409;
  --primary-muted: oklch(85% 0.08 60);
  --primary-soft: oklch(94% 0.035 60);
  --primary-tint: color-mix(in srgb, #b45309 8%, var(--background));

  /* ── focus ring (alpha-blended, for soft ring style) ────────── */
  --focus-ring: oklch(56% 0.09 200 / 0.3);

  /* ── error (form validation — distinct from destructive) ─────── */
  --error: oklch(60% 0.20 25);
  --error-foreground: oklch(99% 0.01 95);

  /* ── control sizes ────────────────────────────────────────────── */
  --size-control-sm: 2rem;
  --size-control-md: 2.5rem;
  --size-control-lg: 3rem;

  /* ── radius ───────────────────────────────────────────────────── */
  --radius: 0.625rem;
  --radius-none: 0rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
  --radius-full: 9999px;

  /* ── typography ───────────────────────────────────────────────── */
  --font-display: 'Outfit', sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
  --font-weight-display: 700;
  --line-height-display: 1.05;
  --tracking-display: -0.02em;
  --font-weight-body: 400;
  --line-height-body: 1.6;
  --tracking-body: 0em;
  --font-weight-mono: 400;

  /* ── shadows ──────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px oklch(18% 0.02 85 / 0.08);
  --shadow-md: 0 2px 4px oklch(18% 0.02 85 / 0.10), 0 1px 2px oklch(18% 0.02 85 / 0.06);
  --shadow-lg: 0 4px 12px oklch(18% 0.02 85 / 0.12), 0 2px 4px oklch(18% 0.02 85 / 0.08);

  /* ── motion ───────────────────────────────────────────────────── */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* ── spacing ──────────────────────────────────────────────────── */
  --spacing-base: 0.25rem;
}

.dark {
  /* ── shadcn base tokens ───────────────────────────────────────── */
  --background: oklch(17% 0.035 258);
  --foreground: oklch(95% 0.012 95);
  --card: oklch(22% 0.04 258);
  --card-foreground: oklch(95% 0.012 95);
  --popover: oklch(22% 0.04 258);
  --popover-foreground: oklch(95% 0.012 95);
  --primary: oklch(72% 0.14 60);
  --primary-foreground: oklch(17% 0.035 258);
  --secondary: oklch(40% 0.08 200);
  --secondary-foreground: oklch(96% 0.01 95);
  --muted: oklch(26% 0.035 258);
  --muted-foreground: oklch(68% 0.025 95);
  --accent: oklch(30% 0.055 200);
  --accent-foreground: oklch(95% 0.012 95);
  --destructive: oklch(65% 0.20 25);
  --destructive-foreground: oklch(97% 0.01 95);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 16%);
  --ring: oklch(65% 0.10 200);
  --success: oklch(68% 0.15 145);
  --warning: oklch(78% 0.14 85);
  --chart-1: oklch(72% 0.14 60);
  --chart-2: oklch(65% 0.10 200);
  --chart-3: oklch(70% 0.17 20);
  --chart-4: oklch(68% 0.14 300);
  --chart-5: oklch(70% 0.14 145);
  --sidebar: oklch(20% 0.035 258);
  --sidebar-foreground: oklch(95% 0.012 95);
  --sidebar-primary: oklch(72% 0.14 60);
  --sidebar-primary-foreground: oklch(17% 0.035 258);
  --sidebar-accent: oklch(30% 0.055 200);
  --sidebar-accent-foreground: oklch(95% 0.012 95);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(65% 0.10 200);

  /* ── surface hierarchy ────────────────────────────────────────── */
  --background-secondary: oklch(19% 0.038 258);
  --surface-hover: oklch(28% 0.06 200);
  --surface-active: oklch(31% 0.065 200);
  --surface-elevated: oklch(25% 0.042 258);

  /* ── border hierarchy ─────────────────────────────────────────── */
  --border-subtle: oklch(1 0 0 / 7%);
  --border-muted: oklch(1 0 0 / 10%);
  --border-strong: oklch(1 0 0 / 22%);

  /* ── text hierarchy ───────────────────────────────────────────── */
  --foreground-secondary: oklch(76% 0.025 95);

  /* ── primary depth ────────────────────────────────────────────── */
  --primary-hover: oklch(77% 0.14 60);
  --primary-muted: oklch(32% 0.07 60);
  --primary-soft: oklch(26% 0.055 60);
  --primary-tint: color-mix(in srgb, oklch(72% 0.14 60) 10%, var(--background));

  /* ── focus ring ───────────────────────────────────────────────── */
  --focus-ring: oklch(65% 0.10 200 / 0.35);

  /* ── error ────────────────────────────────────────────────────── */
  --error: oklch(65% 0.20 25);
  --error-foreground: oklch(97% 0.01 95);
}

/* Stencil Tweaks */
@layer base {
  h1, h2, h3, h4 { font-weight: var(--font-weight-display); }
}

@layer base {
  h1, h2, h3, h4 { font-weight: var(--font-weight-display); }
}

/* /Stencil Tweaks */