/**
 * Melofy Design Tokens
 * Exclusively derived from the brand palette:
 * --text #171816 | --background #f2f4f1 | --primary #3f4e36 | --secondary #adc5a0 | --accent #5f8849
 */

:root {
  /* Brand Core */
  --text: #171816;
  --background: #f2f4f1;
  --primary: #3f4e36;
  --secondary: #adc5a0;
  --accent: #5f8849;

  /* Derived Tints & Shades (Zero new hues) */
  --primary-dark: #273322;
  --primary-light: #4c5d42;
  --secondary-light: #cde0c2;
  --secondary-dark: #8ba57e;
  --accent-dark: #466735;
  --accent-light: #7da565;

  --ink-soft: #3c4238; /* 6.8:1 contrast on #f2f4f1 for accessible secondary copy */
  --ink-faint: #596154;
  --surface: #e4eadf;
  --surface-2: #d8e1d2;
  --surface-card: #f8faf7;
  --line: rgba(23, 24, 22, 0.16);
  --line-strong: rgba(23, 24, 22, 0.32);
  --line-light: rgba(242, 244, 241, 0.18);
  --overlay: rgba(23, 24, 22, 0.75);

  /* Typography */
  --f-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-text: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid Type Scale */
  --step--2: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --step--1: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --step-0: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.42rem, 1.25rem + 0.85vw, 1.88rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.5rem);
  --step-4: clamp(2.3rem, 1.85rem + 2.2vw, 3.4rem);
  --step-5: clamp(3rem, 2.3rem + 3.5vw, 4.8rem);
  --step-6: clamp(3.8rem, 2.8rem + 5.2vw, 7.2rem);
  --step-hero: clamp(4.2rem, 3.2rem + 7.5vw, 10.5rem);

  /* Layout dimensions */
  --bar: 58px;
  --rail: 54px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --max-w: 1380px;
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  /* Animation Easing (Ease In & Ease Out) */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.35s;
  --dur-slow: 0.8s;
}

/* Considered Dark Theme (Same Palette Hues) */
[data-theme="dark"] {
  --text: #f2f4f1;
  --background: #171816;
  --primary: #adc5a0;
  --secondary: #3f4e36;
  --accent: #7da565; /* Accessible for large text/controls on dark background */
  
  --primary-dark: #8ba57e;
  --primary-light: #cde0c2;
  --secondary-light: #4c5d42;
  --secondary-dark: #273322;
  
  --ink-soft: #c4cdc0;
  --ink-faint: #8e9a88;
  --surface: #222620;
  --surface-2: #2b3128;
  --surface-card: #1c201a;
  --line: rgba(242, 244, 241, 0.15);
  --line-strong: rgba(242, 244, 241, 0.3);
  --line-light: rgba(242, 244, 241, 0.12);
  --overlay: rgba(10, 11, 9, 0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #f2f4f1;
    --background: #171816;
    --primary: #adc5a0;
    --secondary: #3f4e36;
    --accent: #7da565;
    
    --primary-dark: #8ba57e;
    --primary-light: #cde0c2;
    --secondary-light: #4c5d42;
    --secondary-dark: #273322;
    
    --ink-soft: #c4cdc0;
    --ink-faint: #8e9a88;
    --surface: #222620;
    --surface-2: #2b3128;
    --surface-card: #1c201a;
    --line: rgba(242, 244, 241, 0.15);
    --line-strong: rgba(242, 244, 241, 0.3);
    --line-light: rgba(242, 244, 241, 0.12);
    --overlay: rgba(10, 11, 9, 0.85);
  }
}