/* =========================================================
   CoderFire — Colors & Type
   shadcn/ui v4 compatible tokens. OKLCH throughout.
   Brand: 8-bit fire. Hot palette + ember-black neutrals.
   RTL: see [dir="rtl"] block at bottom.
   ========================================================= */

/* ---- Fonts (Google substitutes — flag for real fonts later) ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap');

:root {
  /* ============ BRAND — flame palette (raw) ============ */
  --cf-coal:        #0F0A08;  /* deepest charcoal / "ember black" */
  --cf-soot:        #1A1410;
  --cf-ash:         #2A211C;
  --cf-smoke:       #4A3F38;
  --cf-fog:         #877C72;
  --cf-paper:       #F6F1EA;  /* warm off-white */
  --cf-cream:       #FFF6CC;  /* white-hot core */

  --cf-ember:       #5A0E0E;  /* outline / deepest flame */
  --cf-magma:       #C8102E;  /* dark red */
  --cf-inferno:     #E63946;  /* red */
  --cf-blaze:       #FF4D00;  /* PRIMARY hot orange */
  --cf-flare:       #FFA51F;  /* amber */
  --cf-spark:       #FFD60A;  /* yellow */
  --cf-pilot:       #1E90FF;  /* tiny cool accent — blue flame */

  /* Semantic status */
  --cf-success:     #16A34A;
  --cf-warning:     #FFA51F;
  --cf-danger:      #E63946;
  --cf-info:        #1E90FF;

  /* ============ shadcn tokens — LIGHT ============ */
  --background:           oklch(0.985 0.005 70);     /* warm off-white */
  --foreground:           oklch(0.18 0.02 30);       /* ember black */

  --card:                 oklch(1 0 0);
  --card-foreground:      oklch(0.18 0.02 30);

  --popover:              oklch(1 0 0);
  --popover-foreground:   oklch(0.18 0.02 30);

  --primary:              oklch(0.66 0.22 38);       /* #FF4D00 blaze */
  --primary-foreground:   oklch(1 0 0);

  --secondary:            oklch(0.96 0.015 60);      /* warm paper */
  --secondary-foreground: oklch(0.22 0.025 30);

  --muted:                oklch(0.95 0.012 60);
  --muted-foreground:     oklch(0.50 0.02 35);       /* fog */

  --accent:               oklch(0.93 0.06 75);       /* soft flare */
  --accent-foreground:    oklch(0.22 0.05 35);

  --destructive:          oklch(0.58 0.22 28);       /* inferno red */
  --destructive-foreground: oklch(1 0 0);

  --border:               oklch(0.90 0.012 55);
  --input:                oklch(0.92 0.010 55);
  --ring:                 oklch(0.66 0.22 38);       /* primary blaze */

  /* Charts (5 hues climbing the heat ladder) */
  --chart-1:              oklch(0.78 0.17 95);       /* spark */
  --chart-2:              oklch(0.78 0.17 65);       /* flare */
  --chart-3:              oklch(0.66 0.22 38);       /* blaze */
  --chart-4:              oklch(0.58 0.22 28);       /* inferno */
  --chart-5:              oklch(0.45 0.18 25);       /* magma */

  /* Sidebar (used by shadcn sidebar block) */
  --sidebar:                       oklch(0.18 0.02 30);
  --sidebar-foreground:            oklch(0.95 0.01 60);
  --sidebar-primary:               oklch(0.66 0.22 38);
  --sidebar-primary-foreground:    oklch(1 0 0);
  --sidebar-accent:                oklch(0.25 0.03 30);
  --sidebar-accent-foreground:     oklch(0.95 0.01 60);
  --sidebar-border:                oklch(0.30 0.02 30);
  --sidebar-ring:                  oklch(0.66 0.22 38);

  /* ============ Type scale ============ */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-pixel:   "Press Start 2P", "JetBrains Mono", monospace;

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

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-pixel:  0.08em;

  /* ============ Spacing ============ */
  --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; --space-24: 6rem;
  --space-32: 8rem;

  /* ============ Radii ============ */
  /* Brand sits at "medium" — sharp enough for the pixel mood, soft enough for SaaS UI */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  /* PIXEL mode — for retro chips/badges; never on text inputs */
  --radius-pixel: 0;

  /* ============ Shadows — warm-tinted ============ */
  --shadow-xs: 0 1px 0 0 oklch(0.18 0.02 30 / 0.06);
  --shadow-sm: 0 1px 2px 0 oklch(0.18 0.02 30 / 0.08);
  --shadow-md: 0 4px 12px -2px oklch(0.18 0.02 30 / 0.10), 0 2px 4px -2px oklch(0.18 0.02 30 / 0.06);
  --shadow-lg: 0 12px 28px -6px oklch(0.18 0.02 30 / 0.14), 0 4px 8px -4px oklch(0.18 0.02 30 / 0.08);
  --shadow-xl: 0 24px 48px -12px oklch(0.18 0.02 30 / 0.20);
  /* Hot glow — for primary CTAs on dark */
  --shadow-glow:  0 0 0 1px oklch(0.66 0.22 38 / 0.5), 0 8px 24px -4px oklch(0.66 0.22 38 / 0.45);
  --shadow-glow-lg: 0 0 0 1px oklch(0.66 0.22 38 / 0.6), 0 16px 48px -8px oklch(0.66 0.22 38 / 0.55);
  /* Hard "8-bit" shadow — offset solid block */
  --shadow-pixel: 4px 4px 0 0 var(--cf-coal);
  --shadow-pixel-sm: 2px 2px 0 0 var(--cf-coal);
}

/* ============ DARK MODE ============ */
.dark, [data-theme="dark"] {
  --background:           oklch(0.15 0.015 30);      /* coal */
  --foreground:           oklch(0.96 0.008 60);

  --card:                 oklch(0.19 0.018 30);      /* soot */
  --card-foreground:      oklch(0.96 0.008 60);

  --popover:              oklch(0.19 0.018 30);
  --popover-foreground:   oklch(0.96 0.008 60);

  --primary:              oklch(0.70 0.22 42);       /* slightly brighter on dark */
  --primary-foreground:   oklch(0.12 0.02 30);

  --secondary:            oklch(0.25 0.022 30);
  --secondary-foreground: oklch(0.96 0.008 60);

  --muted:                oklch(0.23 0.020 30);
  --muted-foreground:     oklch(0.70 0.015 50);

  --accent:               oklch(0.30 0.06 45);
  --accent-foreground:    oklch(0.96 0.008 60);

  --destructive:          oklch(0.62 0.22 28);
  --destructive-foreground: oklch(0.98 0.005 60);

  --border:               oklch(0.30 0.020 30);
  --input:                oklch(0.28 0.018 30);
  --ring:                 oklch(0.70 0.22 42);

  --chart-1:              oklch(0.85 0.17 95);
  --chart-2:              oklch(0.82 0.17 65);
  --chart-3:              oklch(0.72 0.22 42);
  --chart-4:              oklch(0.62 0.22 28);
  --chart-5:              oklch(0.50 0.18 25);

  --sidebar:                       oklch(0.12 0.018 30);
  --sidebar-foreground:            oklch(0.92 0.008 60);
  --sidebar-primary:               oklch(0.70 0.22 42);
  --sidebar-primary-foreground:    oklch(0.12 0.02 30);
  --sidebar-accent:                oklch(0.20 0.020 30);
  --sidebar-accent-foreground:     oklch(0.92 0.008 60);
  --sidebar-border:                oklch(0.25 0.020 30);
  --sidebar-ring:                  oklch(0.70 0.22 42);
}

/* ============ Base element styles ============ */
html { font-family: var(--font-sans); color: var(--foreground); background: var(--background); }
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); }

h1, .h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-5xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-4xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h4, .h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); line-height: var(--leading-snug);
}
p, .body { font-size: var(--text-base); line-height: var(--leading-normal); }
small, .caption { font-size: var(--text-sm); color: var(--muted-foreground); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Eyebrow / label — uppercase pixel-feel without going full retro */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-pixel);
  text-transform: uppercase;
  color: var(--primary);
}

/* Pixel display — sparingly! marquee headings, badges only */
.pixel {
  font-family: var(--font-pixel);
  letter-spacing: var(--tracking-pixel);
  text-transform: uppercase;
  image-rendering: pixelated;
}

/* ============ RTL ============ */
/* CoderFire ships RTL out-of-the-box for Arabic & Hebrew clients. */
[dir="rtl"] {
  /* Mirror logical paddings/margins via logical properties in components. */
  /* Pixel art (the flame) is symmetrical so no mirror needed. */
}
[dir="rtl"] .pixel,
[dir="rtl"] .eyebrow,
[dir="rtl"] code {
  /* Latin code/labels stay LTR even in RTL context */
  direction: ltr;
  unicode-bidi: embed;
}