/* Eloa — design tokens (Tailwind v4 layer)
   Ported from the Eloa design system (project f02c43d4):
   tokens/colors.css · tokens/typography.css · tokens/spacing.css · tokens/shadcn.css
   Warm, earthy, calm — olive/forest greens, cream, clay/copper. No blue, no purple, no gradients.
   Import AFTER `@import "tailwindcss";`. Fonts are wired via next/font in apps/web (CSS vars
   --font-display / --font-body are set there). */

:root {
  /* --- Base palette (colors.css) --- */
  --olive-leaf: #606c38; /* primary brand green */
  --olive-leaf-600: #4e5a2d; /* hover/pressed */
  --olive-leaf-700: #3e4824;
  --olive-leaf-100: #e7ebd9; /* tint */

  --black-forest: #283618; /* deep green-black — ink / dark surface */
  --black-forest-800: #1d2712;

  --cornsilk: #fefae0; /* warm cream — primary light surface */
  --cornsilk-100: #fffdf3;
  --cornsilk-200: #fbf3ce;

  --sunlit-clay: #dda15e; /* warm amber accent */
  --sunlit-clay-600: #c98a42;

  --copperwood: #bc6c25; /* deep terracotta accent — links/emphasis */
  --copperwood-600: #a15a1b;

  /* --- Neutrals (warm-tinted grays) --- */
  --neutral-0: #ffffff;
  --neutral-50: #fbfaf6;
  --neutral-100: #f3f1e8;
  --neutral-200: #e6e3d6;
  --neutral-300: #d2cdb9;
  --neutral-400: #a9a38b;
  --neutral-500: #7c7663;
  --neutral-600: #5b5648;
  --neutral-700: #423f35;
  --neutral-800: #2c2a23;
  --neutral-900: #1b1a15;

  /* --- Semantic aliases --- */
  --color-bg-app: var(--cornsilk);
  --color-bg-surface: var(--neutral-0);
  --color-bg-surface-sunken: var(--cornsilk-200);
  --color-bg-inverse: var(--black-forest);

  --color-text-primary: var(--black-forest);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted: var(--neutral-500);
  --color-text-inverse: var(--cornsilk-100);
  --color-text-link: var(--copperwood);
  --color-text-link-hover: var(--copperwood-600);

  --color-brand-primary: var(--olive-leaf);
  --color-brand-primary-hover: var(--olive-leaf-600);
  --color-brand-primary-active: var(--olive-leaf-700);
  --color-brand-accent: var(--sunlit-clay);
  --color-brand-accent-hover: var(--sunlit-clay-600);
  --color-brand-emphasis: var(--copperwood);

  --color-border-subtle: var(--neutral-200);
  --color-border-default: var(--neutral-300);
  --color-border-strong: var(--neutral-400);

  --color-success: #5b7c4f;
  --color-warning: var(--sunlit-clay);
  --color-danger: #a6462c;
  --color-focus-ring: var(--olive-leaf);

  /* --- shadcn/ui bridge (shadcn.css) — plain hex, consumed as var() directly --- */
  --background: var(--cornsilk);
  --foreground: var(--black-forest);
  --card: var(--neutral-0);
  --card-foreground: var(--black-forest);
  --popover: var(--neutral-0);
  --popover-foreground: var(--black-forest);
  --primary: var(--olive-leaf);
  --primary-foreground: var(--cornsilk-100);
  --secondary: var(--olive-leaf-100);
  --secondary-foreground: var(--olive-leaf-700);
  --muted: var(--neutral-100);
  --muted-foreground: var(--neutral-500);
  --accent: var(--sunlit-clay);
  --accent-foreground: var(--black-forest);
  --destructive: var(--color-danger);
  --destructive-foreground: #ffffff;
  --border: var(--neutral-300);
  --input: var(--neutral-300);
  --ring: var(--olive-leaf);

  /* --- Spacing / radius / shadow / motion (spacing.css) --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius: var(--radius-md);

  --shadow-sm: 0 1px 2px rgba(40, 54, 24, 0.06);
  --shadow-md: 0 4px 16px rgba(40, 54, 24, 0.08);
  --shadow-lg: 0 12px 32px rgba(40, 54, 24, 0.12);
  --shadow-inner: inset 0 1px 2px rgba(40, 54, 24, 0.08);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 120ms;
  --duration-standard: 220ms;
  --duration-slow: 400ms;

  --max-content-width: 1160px;
  --container-padding: 24px;

  /* --- Typography (typography.css) — font families set by next/font in layout --- */
  --font-display: var(--font-safira, "Italiana"), "Times New Roman", serif;
  --font-body: var(--font-inter, "Inter"), -apple-system, "Segoe UI", sans-serif;

  --text-display-xl: 400 4.5rem/1.05 var(--font-display);
  --text-display-lg: 400 3.25rem/1.1 var(--font-display);
  --text-display-md: 400 2.25rem/1.15 var(--font-display);
  --text-display-sm: 400 1.625rem/1.25 var(--font-display);
  --text-heading-lg: 600 1.375rem/1.3 var(--font-body);
  --text-heading-md: 600 1.125rem/1.35 var(--font-body);
  --text-heading-sm: 600 1rem/1.4 var(--font-body);
  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body-md: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-caption: 500 0.75rem/1.4 var(--font-body);
  --text-label: 600 0.8125rem/1.3 var(--font-body);

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-label: 0.06em;
}

/* Map Eloa tokens into Tailwind's theme so utilities (bg-*, text-*, rounded-*, shadow-*)
   resolve to the brand palette. `inline` keeps them referencing the :root vars above. */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* brand-named utilities for the earthy palette */
  --color-olive: var(--olive-leaf);
  --color-olive-600: var(--olive-leaf-600);
  --color-olive-700: var(--olive-leaf-700);
  --color-olive-100: var(--olive-leaf-100);
  --color-forest: var(--black-forest);
  --color-cornsilk: var(--cornsilk);
  --color-clay: var(--sunlit-clay);
  --color-copper: var(--copperwood);
  --color-surface: var(--color-bg-surface);
  --color-surface-sunken: var(--color-bg-surface-sunken);

  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --font-sans: var(--font-body);

  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);

  --shadow-eloa-sm: var(--shadow-sm);
  --shadow-eloa-md: var(--shadow-md);
  --shadow-eloa-lg: var(--shadow-lg);

  --ease-gentle: var(--ease-gentle);
  --ease-standard: var(--ease-standard);
}