/**
 * @file theme.css
 * Earthsafe design tokens.
 *
 * Copy this file to your web root next to index.php to customize without
 * rebuilding CSS. Clear Drupal cache after changes.
 *
 * Token naming convention:
 * - brand-*     Core identity colors (sage, navy, blue, gold)
 * - surface-*   Background fills
 * - content-*   Text and divider colors
 * - edge-*      Border colors
 * - inverse-*   White at opacity % for text/UI on dark surfaces
 * - overlay-*   Gradients and translucent overlays
 * - btn-*       Button aliases (reference brand tokens)
 *
 * shadcn/ui tokens (--background, --primary, etc.) power Canvas components.
 */

:root {
  /* ============================================
     BRAND
     ============================================ */
  --color-brand-sage: #aec3a9;
  --color-brand-sage-hover: #9ab596;
  --color-brand-sage-deep: #7a9e75;
  --color-brand-sage-text: #4d6647;
  --color-brand-sage-large: #6d9065;
  --color-sage-tint: #eef5ec;
  --color-sage-tint-hover: #d8ebd8;
  --color-brand-navy: #1e376b;
  --color-brand-navy-hover: #0d2250;
  --color-brand-blue: #0760a8;
  --color-brand-blue-hover: #055290;
  --color-brand-tag: #7fb6e4;
  --color-brand-gold: #c8a85a;

  --color-footer-heading: #c6d4bf;
  --color-footer-link: #c3cedf;
  --color-footer-text: #c9d2e1;
  --color-footer-muted: #c1cbdf;

  /* ============================================
     SURFACE
     ============================================ */
  --color-surface-dark: #0d1a2e;
  --color-surface-hero: #0c2435;
  --color-surface-muted: #f4f7fa;
  --color-surface-muted2: #f2f3f0;
  --color-surface-muted3: #f1f4f7;
  --color-surface-info: #eef4fa;
  --color-surface-hover: #f0f5f0;
  --color-surface-placeholder: #f3f4f6;
  --color-surface-panel: #f0f2f5;

  /* ============================================
     CONTENT (text)
     ============================================ */
  --color-white: #fff;
  --color-content-primary: #111;
  --color-content-secondary: #555;
  --color-content-muted: #666;
  --color-content-subtle: #9aa1aa;
  --color-content-faint: #636b75;
  --color-content-eyebrow: #747578;
  --color-content-meta: #7e93a8;
  --color-content-light: #888;
  --color-content-divider: #e6e9ef;
  --color-content-dark-gray: #333;

  /* ============================================
     EDGE (borders)
     ============================================ */
  --color-edge-muted: #e0e0e0;
  --color-edge-muted1: #c3cbd5;
  --color-edge-accent: #dce1e8;
  --color-edge-tag: #cfe0ee;

  /* ============================================
     INVERSE (white on dark surfaces, opacity %)
     ============================================ */
  --color-inverse-8: rgba(255, 255, 255, 0.08);
  --color-inverse-10: rgba(255, 255, 255, 0.1);
  --color-inverse-12: rgba(255, 255, 255, 0.12);
  --color-inverse-18: rgba(255, 255, 255, 0.18);
  --color-inverse-30: rgba(255, 255, 255, 0.3);
  --color-inverse-35: rgba(255, 255, 255, 0.35);
  --color-inverse-40: rgba(255, 255, 255, 0.4);
  --color-inverse-45: rgba(255, 255, 255, 0.45);
  --color-inverse-50: rgba(255, 255, 255, 0.5);
  --color-inverse-60: rgba(255, 255, 255, 0.6);
  --color-inverse-72: rgba(255, 255, 255, 0.72);
  --color-inverse-80: rgba(255, 255, 255, 0.8);
  --color-inverse-90: rgba(255, 255, 255, 0.9);

  /* ============================================
     BUTTON ALIASES
     ============================================ */
  --btn-sage-bg: var(--color-brand-sage);
  --btn-sage-bg-hover: var(--color-brand-sage-hover);
  --btn-sage-fg: var(--color-brand-navy);
  --btn-blue-bg: var(--color-brand-blue);
  --btn-blue-bg-hover: var(--color-brand-blue-hover);
  --btn-blue-fg: var(--color-white);
  --btn-navy-bg: var(--color-brand-navy);
  --btn-navy-bg-hover: var(--color-brand-navy-hover);
  --btn-navy-fg: var(--color-white);
  --btn-ghost-border: var(--color-inverse-45);
  --btn-ghost-border-sm: var(--color-inverse-40);
  --btn-ghost-fg: var(--color-white);

  /* ============================================
     OVERLAYS
     ============================================ */
  --overlay-nav-clear: rgba(13, 26, 46, 0);
  --overlay-nav-solid: rgba(13, 26, 46, 0.97);
  --overlay-hero-top: rgba(8, 18, 42, 0.65);
  --overlay-hero-top-clear: rgba(8, 18, 42, 0);
  --overlay-hero-side-strong: rgba(10, 22, 50, 0.92);
  --overlay-hero-side-mid: rgba(10, 22, 50, 0.75);
  --overlay-hero-side-light: rgba(10, 22, 50, 0.15);
  --overlay-hero-side-clear: rgba(10, 22, 50, 0);
  --overlay-hero-bottom: rgba(5, 12, 30, 0.5);
  --overlay-stats-divider: rgba(13, 26, 46, 0.15);
  --overlay-solution-section: rgba(13, 26, 46, 0.88);
  --overlay-solution-card: rgba(15, 30, 60, 0.82);
  --overlay-solution-card-hover: rgba(15, 30, 60, 0.95);

  /* ============================================
     SHADCN / UI TOKENS
     ============================================ */
  --background: oklch(1 0 0);
  --foreground: #2a2e35;
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.13 0.043 265.132);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);

  /* ============================================
     TYPOGRAPHY & LAYOUT
     ============================================ */
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);

  /* Letter-spacing scale */
  --letter-spacing-1: 0.08em;
  --letter-spacing-2: 0.1em;
  --letter-spacing-3: 0.12em;
  --letter-spacing-4: 0.1875em;
  --navbar-height: calc(var(--spacing) * 15);
  --font-size-xs: 0.75rem; /* 12px  labels / meta        */
  --font-size-sm: 0.875rem; /* 14px  UI / nav / footer    */
  --font-size-base: 1rem; /* 16px  body                 */
  --font-size-md: 1.125rem; /* 18px  lead / card title    */
  --font-size-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-2xl: clamp(1.9rem, 1.4rem + 2.6vw, 2.75rem);
  --font-size-3xl: clamp(2.25rem, 1.5rem + 3.6vw, 3.5rem);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}