/*
 * GINI brand stylesheet · v1.6
 * Source: https://gini.iq/brand.css
 * Manifest: https://gini.iq/brand.json
 *
 * Drop-in CSS variables for the GINI brand identity. Adopt
 * by importing once at the top of your global stylesheet:
 *
 *   @import url("https://gini.iq/brand.css");
 *
 * Both raw `--gini-*` variables and shadcn/Tailwind-style
 * aliases (`--primary`, `--background`, …) are exposed.
 */

:root {
  /* ── Palette (raw) ───────────────────────────────────── */
  --gini-orange: #F05D25;
  --gini-orange-rgb: 240 93 37;
  --gini-ember: #D94E1A;
  --gini-ember-rgb: 217 78 26;
  --gini-ink: #1A1A1A;
  --gini-ink-rgb: 26 26 26;
  --gini-cream: #FBF6F0;
  --gini-cream-rgb: 251 246 240;
  --gini-sand: #EFE6DB;
  --gini-sand-rgb: 239 230 219;

  /* ── Aliases (shadcn / Tailwind / generic) ───────────── */
  --primary: var(--gini-orange);
  --primary-foreground: #ffffff;
  --background: var(--gini-cream);
  --foreground: var(--gini-ink);
  --card: #ffffff;
  --card-foreground: var(--gini-ink);
  --muted: var(--gini-sand);
  --muted-foreground: color-mix(in oklab, var(--gini-ink) 60%, transparent);
  --accent: var(--gini-orange);
  --accent-foreground: #ffffff;
  --border: color-mix(in oklab, var(--gini-ink) 12%, transparent);
  --ring: var(--gini-orange);

  /* ── Typography ─────────────────────────────────────── */
  --gini-font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gini-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --gini-text-display-size: clamp(32–48px, calc(32–48px + 0.5vw), 48px);
  --gini-text-display-weight: 800;
  --gini-text-heading-size: clamp(36–48px, calc(36–48px + 0.5vw), 48px);
  --gini-text-heading-weight: 700;
  --gini-text-subheading-size: clamp(20–24px, calc(20–24px + 0.5vw), 24px);
  --gini-text-subheading-weight: 600;
  --gini-text-body-size: clamp(16–18px, calc(16–18px + 0.5vw), 18px);
  --gini-text-body-weight: 400;
  --gini-text-caption-size: clamp(12–14px, calc(12–14px + 0.5vw), 14px);
  --gini-text-caption-weight: 600;

  /* ── Geometry ───────────────────────────────────────── */
  --gini-radius: 0.75rem;
  --gini-radius-sm: 0.5rem;
  --gini-radius-lg: 1rem;
  --gini-radius-xl: 1.5rem;
  --gini-radius-2xl: 2rem;
  --radius: var(--gini-radius);

  /* ── Shadows ────────────────────────────────────────── */
  --gini-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --gini-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.08);
  --gini-shadow-lg: 0 20px 40px -12px rgb(0 0 0 / 0.18);
  --gini-glow-primary: 0 16px 36px rgb(240 93 37 / 0.18);
}

/* ── Dark mode ─────────────────────────��───────────────── */
:root.dark, [data-theme="dark"] {
  --background: var(--gini-ink);
  --foreground: var(--gini-cream);
  --card: color-mix(in oklab, var(--gini-ink) 90%, white);
  --card-foreground: var(--gini-cream);
  --muted: color-mix(in oklab, var(--gini-ink) 80%, white);
  --muted-foreground: color-mix(in oklab, var(--gini-cream) 70%, transparent);
  --border: color-mix(in oklab, var(--gini-cream) 14%, transparent);
}