/**
 * base.css - Design Token Definitions
 *
 * Semantic tokens for the widget platform.
 * All widgets MUST use these tokens; hardcoded values are blocked by validators.
 *
 * Colour format: OKLCH full values — usage is var(--token), NOT oklch(var(--token))
 * Other tokens: standard CSS values (rem, px, font stacks, etc.)
 */

:root {
  /* ============================================
   * PER-TENANT THEMING PRIMITIVES
   * Override these in [data-tenant="..."] blocks
   * ============================================ */
  --brand-hue: 250;
  --brand-chroma: 0.05;

  /* ============================================
   * NEUTRAL TOKENS
   * ============================================ */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0.03 265);

  --muted: oklch(0.965 0.005 265);
  --muted-foreground: oklch(0.556 0.02 265);

  --border: oklch(0.922 0.01 265);
  --ring: oklch(0.145 0.03 265);
  --radius: 0.5rem;

  /* ============================================
   * BRAND TOKENS
   * Brand-derived: use --brand-hue and --brand-chroma
   *
   * Palette model:
   *   --primary     — main brand, CTA backgrounds, strong emphasis
   *   --secondary   — subtle/muted backgrounds, secondary actions
   *   --accent      — high-chroma highlight, focus rings, active states
   *   --tertiary    — complementary brand support (optional, hue-rotated)
   *   --highlight   — reserved for preset themes (not defined by default)
   *
   * State tokens (via color-mix):
   *   --primary-hover, --primary-active
   *   --accent-hover, --accent-active
   * ============================================ */
  --primary: oklch(0.205 var(--brand-chroma) var(--brand-hue));
  --primary-foreground: oklch(0.985 0.005 265);
  --primary-hover: color-mix(in oklch, var(--primary) 88%, var(--foreground));
  --primary-active: color-mix(in oklch, var(--primary) 78%, var(--foreground));

  --secondary: oklch(0.965 0.005 265);
  --secondary-foreground: oklch(0.205 var(--brand-chroma) var(--brand-hue));

  --accent: oklch(0.55 calc(var(--brand-chroma) * 4 + 0.08) var(--brand-hue));
  --accent-foreground: oklch(0.985 0.005 265);
  --accent-hover: color-mix(in oklch, var(--accent) 85%, var(--foreground));
  --accent-active: color-mix(in oklch, var(--accent) 72%, var(--foreground));

  --tertiary: oklch(0.65 calc(var(--brand-chroma) * 3 + 0.06) calc(var(--brand-hue) + 60));
  --tertiary-foreground: oklch(0.985 0.005 265);

  /* ============================================
   * SEMANTIC TOKENS (Required by spec)
   * Fixed hues — not affected by brand theming
   * ============================================ */
  --destructive: oklch(0.577 0.245 27);
  --destructive-foreground: oklch(0.985 0.005 265);

  --success: oklch(0.52 0.17 145);
  --success-foreground: oklch(1 0 0);

  --warning: oklch(0.75 0.18 70);
  --warning-foreground: oklch(0 0 0);

  --info: oklch(0.55 0.2 260);
  --info-foreground: oklch(1 0 0);

  /* ============================================
   * COMPONENT TOKENS
   * ============================================ */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0.03 265);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0.03 265);

  --input: oklch(0.922 0.01 265);

  /* ============================================
   * SIDEBAR SURFACE TOKENS
   * The sidebar uses its own bg/fg pair rather than --primary so it stays
   * visually dark in BOTH light and dark modes. In light mode --primary is
   * dark (brand navy), which works well as a sidebar. In dark mode --primary
   * flips to near-white (it's used for text on dark backgrounds), which would
   * make the sidebar turn white — the sidebar-specific tokens below prevent that.
   * ============================================ */
  --sidebar-bg: oklch(0.205 var(--brand-chroma) var(--brand-hue));
  --sidebar-fg: oklch(0.985 0.005 265);

  /* ============================================
   * TYPOGRAPHY TOKENS
   * ============================================ */
  --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ============================================
   * SPACING SCALE (mobile-first, 4px base unit)
   * ============================================ */
  --space-0: 0;
  --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;

  /* Spacing aliases (deprecated — prefer --space-N) */
  --spacing-1: var(--space-1);
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);
  --spacing-8: var(--space-8);

  /* ============================================
   * RADIUS SCALE (derived from --radius)
   * ============================================ */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-full: 9999px;

  /* ============================================
   * BORDER WIDTH TOKENS
   * ============================================ */
  --border-thin: 1px;
  --border-default: 2px;
  --border-thick: 3px;
  --border-heavy: 4px;

  /* ============================================
   * ELEVATION / SHADOW TOKENS
   * oklch(0 0 0 / alpha) replaces rgb(0 0 0 / alpha)
   * ============================================ */
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);

  /* ============================================
   * MOTION TOKENS (prefers-reduced-motion safe)
   * ============================================ */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ============================================
   * ICON SIZE TOKENS
   * ============================================ */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;

  /* ============================================
   * BREAKPOINT REFERENCE TOKENS
   * CSS @media cannot use custom properties — use
   * literal values in queries. These document the
   * canonical breakpoints for the platform.
   *   sm:  640px   (large phones landscape)
   *   md:  768px   (tablets portrait)
   *   lg:  1024px  (tablets landscape / small laptops)
   *   xl:  1280px  (standard desktops)
   *   2xl: 1536px  (wide monitors)
   * ============================================ */
  --bp-sm: 640;
  --bp-md: 768;
  --bp-lg: 1024;
  --bp-xl: 1280;
  --bp-2xl: 1536;

  /* ============================================
   * GRID SYSTEM TOKENS
   * Used by .bp-grid and .bp-widget-grid.
   * ============================================ */
  --grid-columns: 12;
  --grid-gap: var(--space-3);
  --grid-gap-lg: var(--space-4);
  --grid-pad: var(--space-3);
  --grid-pad-lg: var(--space-5);

  /* ============================================
   * SEMANTIC STATE TOKENS
   * Interactive and data-state styling
   * ============================================ */
  --state-disabled-opacity: 0.5;
  --state-selected-bg: oklch(0.95 0.02 var(--brand-hue));
  --state-selected-border: var(--primary);
  --state-hover-bg: var(--accent);
  --state-drag-over-bg: oklch(0.93 0.03 var(--brand-hue));
  --state-drag-over-border: var(--primary);
  --state-active-sort-bg: oklch(0.96 0.015 var(--brand-hue));
  --state-empty-bg: var(--muted);
  --state-focus-ring: var(--ring);


  /* ============================================
   * IMAGE & MEDIA TOKENS
   * ============================================ */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-photo: 4 / 3;
  --aspect-wide: 21 / 9;
  --aspect-portrait: 3 / 4;

  --avatar-xs: 24px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 56px;
  --avatar-xl: 80px;

}

/* ============================================
 * DARK MODE
 * Both .dark and [data-theme="dark"] are supported
 * ============================================ */
.dark, [data-theme="dark"] {
  --background: oklch(0.145 0.03 265);
  --foreground: oklch(0.985 0.005 265);

  --muted: oklch(0.22 0.02 265);
  --muted-foreground: oklch(0.7 0.015 265);

  --border: oklch(0.22 0.02 265);
  --ring: oklch(0.82 0.01 265);

  --primary: oklch(0.985 0.005 265);
  --primary-foreground: oklch(0.205 var(--brand-chroma) var(--brand-hue));
  --primary-hover: color-mix(in oklch, var(--primary) 88%, var(--background));
  --primary-active: color-mix(in oklch, var(--primary) 78%, var(--background));

  --secondary: oklch(0.22 0.02 265);
  --secondary-foreground: oklch(0.985 0.005 265);

  --accent: oklch(0.50 calc(var(--brand-chroma) * 4 + 0.08) var(--brand-hue));
  --accent-foreground: oklch(0.985 0.005 265);
  --accent-hover: color-mix(in oklch, var(--accent) 85%, var(--background));
  --accent-active: color-mix(in oklch, var(--accent) 72%, var(--background));

  --tertiary: oklch(0.55 calc(var(--brand-chroma) * 3 + 0.06) calc(var(--brand-hue) + 60));
  --tertiary-foreground: oklch(0.985 0.005 265);

  --destructive: oklch(0.38 0.18 27);
  --destructive-foreground: oklch(0.985 0.005 265);

  --success: oklch(0.42 0.14 145);
  --success-foreground: oklch(1 0 0);

  --warning: oklch(0.62 0.15 70);
  --warning-foreground: oklch(1 0 0);

  --info: oklch(0.45 0.17 260);
  --info-foreground: oklch(1 0 0);

  --card: oklch(0.145 0.03 265);
  --card-foreground: oklch(0.985 0.005 265);

  --popover: oklch(0.145 0.03 265);
  --popover-foreground: oklch(0.985 0.005 265);

  --input: oklch(0.22 0.02 265);

  /* Sidebar stays dark in dark mode — a slightly deeper shade of the brand hue
   * so it contrasts with the dark background rather than blending into it. */
  --sidebar-bg: oklch(0.16 0.025 var(--brand-hue));
  --sidebar-fg: oklch(0.92 0.005 265);
}

/* ── Semantic State — dark overrides ───────────── */
.dark, [data-theme="dark"] {
  --state-selected-bg: oklch(0.22 0.03 var(--brand-hue));
  --state-drag-over-bg: oklch(0.20 0.04 var(--brand-hue));
  --state-active-sort-bg: oklch(0.24 0.025 var(--brand-hue));
  --state-empty-bg: var(--muted);
}


/* ============================================
 * PER-TENANT THEMING EXAMPLE
 * Override brand-hue and brand-chroma only.
 * All brand-derived tokens update automatically.
 * ============================================ */
[data-tenant="wooduchoose"] {
  --brand-hue: 140;
  --brand-chroma: 0.12;
}