/**
 * variables.css
 * Declares the design tokens for Mowa Labs LLC based on the brand
 * specifications in DESIGN.md (Wise design tokens).
 */

:root {
  /* Google Fonts Import: Manrope (for weight 900 headings) and Inter (for utility/body) */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Manrope:wght@800;900&display=swap');

  /* Wise Colors - Light Palette Constants */
  --colors-primary-light: #9fe870;         /* Wise Green */
  --colors-primary-active-light: #cdffad;  /* Wise Green Hover */
  --colors-primary-neutral-light: #c5edab;
  --colors-primary-pale-light: #e2f6d5;
  --colors-canvas-light: #ffffff;          /* White Card Canvas */
  --colors-canvas-soft-light: #e8ebe6;     /* Sage Canvas Background */
  --colors-ink-light: #0e0f0c;             /* Near-Black Text */
  --colors-body-light: #454745;            /* Secondary Body text */
  --colors-mute-light: #868685;            /* Placeholder/Muted text */
  --colors-border-light: rgba(14, 15, 12, 0.08);

  /* Wise Colors - Dark Palette Constants (Flipped polarity) */
  --colors-primary-dark: #9fe870;          /* Keeps Wise Green CTA */
  --colors-primary-active-dark: #cdffad;
  --colors-primary-neutral-dark: #c5edab;
  --colors-primary-pale-dark: #223c10;
  --colors-canvas-dark: #161714;           /* Darker card backgrounds */
  --colors-canvas-soft-dark: #0e0f0c;      /* Deep Ink canvas background */
  --colors-ink-dark: #e8ebe6;              /* Canvas soft-sage for text */
  --colors-body-dark: #a2a5a1;             /* Muted grey-sage body text */
  --colors-mute-dark: #7b7e7a;
  --colors-border-dark: rgba(232, 235, 230, 0.12);

  /* Theme variables - Default to Light */
  --bg: var(--colors-canvas-soft-light);
  --surface: var(--colors-canvas-light);
  --surface-opaque: var(--colors-canvas-light);
  --text-primary: var(--colors-ink-light);
  --text-secondary: var(--colors-body-light);
  --text-mute: var(--colors-mute-light);
  --primary: var(--colors-primary-light);
  --primary-hover: var(--colors-primary-active-light);
  --border: var(--colors-border-light);
  --primary-text: #0e0f0c; /* Black text on green CTA elements always */

  /* Scrollbars */
  --scrollbar-track: #e2e5e0;
  --scrollbar-thumb: #c4c7c2;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Manrope', var(--font-sans);

  /* Elevation (Elevation achieved via canvas/surface contrast instead of shadows) */
  --shadow: none;

  /* Shapes & Rounding Scale */
  --rounded-none: 0px;
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-xl: 24px;   /* Canonical card and button radius */
  --rounded-pill: 9999px;
  --rounded-full: 9999px;

  /* Spacing Scale (4px base) */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* Timing & Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Viewport limits */
  --max-width: 1200px;
  --header-height: 80px;

  color-scheme: light dark;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

/* System Preferences dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--colors-canvas-soft-dark);
    --surface: var(--colors-canvas-dark);
    --surface-opaque: var(--colors-canvas-dark);
    --text-primary: var(--colors-ink-dark);
    --text-secondary: var(--colors-body-dark);
    --text-mute: var(--colors-mute-dark);
    --primary: var(--colors-primary-dark);
    --primary-hover: var(--colors-primary-active-dark);
    --border: var(--colors-border-dark);
    
    --scrollbar-track: #1c1d19;
    --scrollbar-thumb: #3c3e38;
  }
}

/* Support light-dark() CSS function */
@supports (color: light-dark(white, black)) {
  :root {
    --bg: light-dark(var(--colors-canvas-soft-light), var(--colors-canvas-soft-dark));
    --surface: light-dark(var(--colors-canvas-light), var(--colors-canvas-dark));
    --surface-opaque: light-dark(var(--colors-canvas-light), var(--colors-canvas-dark));
    --text-primary: light-dark(var(--colors-ink-light), var(--colors-ink-dark));
    --text-secondary: light-dark(var(--colors-body-light), var(--colors-body-dark));
    --text-mute: light-dark(var(--colors-mute-light), var(--colors-mute-dark));
    --primary: light-dark(var(--colors-primary-light), var(--colors-primary-dark));
    --primary-hover: light-dark(var(--colors-primary-active-light), var(--colors-primary-active-dark));
    --border: light-dark(var(--colors-border-light), var(--colors-border-dark));

    --scrollbar-track: light-dark(#e2e5e0, #1c1d19);
    --scrollbar-thumb: light-dark(#c4c7c2, #3c3e38);
  }
}

/* Direct data-theme Overrides via Javascript theme toggle button */
:root[data-theme="light"] {
  --bg: var(--colors-canvas-soft-light);
  --surface: var(--colors-canvas-light);
  --surface-opaque: var(--colors-canvas-light);
  --text-primary: var(--colors-ink-light);
  --text-secondary: var(--colors-body-light);
  --text-mute: var(--colors-mute-light);
  --primary: var(--colors-primary-light);
  --primary-hover: var(--colors-primary-active-light);
  --border: var(--colors-border-light);
  --scrollbar-track: #e2e5e0;
  --scrollbar-thumb: #c4c7c2;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: var(--colors-canvas-soft-dark);
  --surface: var(--colors-canvas-dark);
  --surface-opaque: var(--colors-canvas-dark);
  --text-primary: var(--colors-ink-dark);
  --text-secondary: var(--colors-body-dark);
  --text-mute: var(--colors-mute-dark);
  --primary: var(--colors-primary-dark);
  --primary-hover: var(--colors-primary-active-dark);
  --border: var(--colors-border-dark);
  --scrollbar-track: #1c1d19;
  --scrollbar-thumb: #3c3e38;
  color-scheme: dark;
}