/*
 * GINI brand tokens for Tailwind CSS v4 · v1.6
 * Source: https://gini.iq/brand.tailwind.css
 *
 * Usage (in your project's globals.css):
 *
 *   @import url("https://gini.iq/brand.tailwind.css");
 *   @import "tailwindcss";
 *
 * Why this order:
 *   Tailwind v4 expands @import "tailwindcss" in place,
 *   inlining thousands of CSS rules. If the brand @import
 *   sat AFTER it, PostCSS would reject the bundle with
 *   "@import must precede all other statements". Loading
 *   the brand file FIRST keeps both @imports at the top
 *   of the final CSS, where the spec requires them.
 *
 * What you get either way:
 *   • At build time (lightningcss / postcss-import): the
 *     @theme block below is read by Tailwind and used to
 *     generate utility classes natively.
 *   • At runtime (plain browser fetch): the pre-baked
 *     @layer utilities block at the bottom of this file
 *     supplies the same utility classes directly, so
 *     bg-primary / text-ink / bg-cream / font-sans work
 *     even when the file isn't compiled by Tailwind.
 */

@import url("https://gini.iq/brand.css");

@theme inline {
  --font-sans: "Rubik", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* Palette → Tailwind utility colours */
  --color-orange: #F05D25;
  --color-ember: #D94E1A;
  --color-ink: #1A1A1A;
  --color-cream: #FBF6F0;
  --color-sand: #EFE6DB;

  /* Generic aliases — bg-primary, text-foreground, etc. */
  --color-primary: var(--gini-orange);
  --color-primary-foreground: #ffffff;
  --color-background: var(--gini-cream);
  --color-foreground: var(--gini-ink);
  --color-card: #ffffff;
  --color-card-foreground: var(--gini-ink);
  --color-muted: var(--gini-sand);
  --color-accent: var(--gini-orange);
  --color-accent-foreground: #ffffff;
  --color-border: color-mix(in oklab, var(--gini-ink) 12%, transparent);
  --color-ring: var(--gini-orange);

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
}

@layer utilities {
  .bg-primary { background-color: var(--gini-orange); }
  .text-primary { color: var(--gini-orange); }
  .text-primary-foreground { color: #ffffff; }
  .bg-primary-foreground { background-color: #ffffff; }
  .bg-background { background-color: var(--gini-cream); }
  .text-foreground { color: var(--gini-ink); }
  .bg-card { background-color: #ffffff; }
  .text-card-foreground { color: var(--gini-ink); }
  .bg-cream { background-color: var(--gini-cream); }
  .text-cream { color: var(--gini-cream); }
  .bg-ink { background-color: var(--gini-ink); }
  .text-ink { color: var(--gini-ink); }
  .bg-sand { background-color: var(--gini-sand); }
  .bg-ember { background-color: var(--gini-ember); }
  .text-ember { color: var(--gini-ember); }
  .bg-orange { background-color: var(--gini-orange); }
  .text-orange { color: var(--gini-orange); }
  .bg-muted { background-color: var(--gini-sand); }
  .text-muted-foreground { color: color-mix(in oklab, var(--gini-ink) 65%, transparent); }
  .bg-accent { background-color: var(--gini-orange); }
  .text-accent { color: var(--gini-orange); }
  .text-accent-foreground { color: #ffffff; }
  .border-border { border-color: color-mix(in oklab, var(--gini-ink) 12%, transparent); }
  .ring-ring { --tw-ring-color: var(--gini-orange); }
  .font-sans { font-family: "Rubik", system-ui, sans-serif; }
  .font-mono { font-family: "Geist Mono", ui-monospace, monospace; }
}