/* === Design Tokens – bobiq.ai Brand System === */
/* Source: docs/brand-playbook.md Section 2.9 */

:root {
  /* === Color: Primary Ramp (Frog Green) === */
  --color-primary-50: #ECFAEE;
  --color-primary-100: #D4F2D8;
  --color-primary-200: #A8E2B0;
  --color-primary-300: #7BD08A;
  --color-primary-400: #56BA65;
  --color-primary-500: #3DA34E;
  --color-primary-600: #2F8A3E;
  --color-primary-700: #24712F;
  --color-primary-800: #1A5822;
  --color-primary-900: #124018;
  --color-primary-950: #0B2A10;

  /* === Color: Secondary Ramp (Warm Wood) === */
  --color-secondary-50: #FAF6F0;
  --color-secondary-100: #F0E6D5;
  --color-secondary-200: #DDCBB0;
  --color-secondary-300: #C5AD88;
  --color-secondary-400: #B09468;
  --color-secondary-500: #A07845;
  --color-secondary-600: #886238;
  --color-secondary-700: #704E2C;
  --color-secondary-800: #583C22;
  --color-secondary-900: #412B18;
  --color-secondary-950: #2C1C0F;

  /* === Color: Neutral Ramp (Parchment) === */
  --color-neutral-50: #FDFAF2;
  --color-neutral-100: #F5EDD8;
  --color-neutral-200: #E8DCC2;
  --color-neutral-300: #D4C6A8;
  --color-neutral-400: #B8A88A;
  --color-neutral-500: #9C8C70;
  --color-neutral-600: #7E7058;
  --color-neutral-700: #615544;
  --color-neutral-800: #463C30;
  --color-neutral-900: #2E2620;
  --color-neutral-950: #1E1812;

  /* === Color: Accent (Cheek Pink) === */
  --color-accent-500: #E09090;

  /* === Color: Deep Forest === */
  --color-dark: #1A3828;

  /* === Color: Semantic === */
  --color-success-500: #4DBF60;
  --color-success-bg: #E5F7E8;
  --color-warning-500: #D4A24A;
  --color-warning-bg: #FBF3E0;
  --color-error-500: #D08070;
  --color-error-bg: #FAEFEC;
  --color-info-500: #6A9EC8;
  --color-info-bg: #EBF2FA;

  /* === Surface tokens (light mode) === */
  --surface-page: var(--color-neutral-50);
  --surface-card: var(--color-neutral-100);
  --surface-alt: var(--color-secondary-50);
  --text-primary: var(--color-dark);
  --text-secondary: var(--color-neutral-700);
  --text-muted: var(--color-neutral-500);
  --border-default: var(--color-neutral-200);
  --link-color: var(--color-primary-700);
  --link-hover: var(--color-primary-500);
  --btn-primary-bg: var(--color-primary-500);
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: var(--color-primary-400);

  /* === Typography === */
  --font-display: 'Plus Jakarta Sans', 'Nunito', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.22rem;
  --font-size-xl: 1.33rem;
  --font-size-2xl: 1.63rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.45rem;
  --font-size-5xl: 3rem;

  /* === Spacing === */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* === Border Radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === Shadows (warm-tinted, paper depth) === */
  --shadow-sm: 0 1px 2px rgba(120, 90, 50, 0.12);
  --shadow-md: 0 2px 8px rgba(120, 90, 50, 0.15);
  --shadow-lg: 0 4px 16px rgba(120, 90, 50, 0.18);

  /* === Motion === */
  --duration-micro: 100ms;
  --duration-short: 200ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --ease-stop-motion-3: steps(3, end);
  --ease-stop-motion-4: steps(4, end);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
}

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #1A3828;
    --surface-card: #1E3526;
    --surface-alt: #152A1C;
    --text-primary: #F5EDD8;
    --text-secondary: #D4C6A8;
    --text-muted: #B8A88A;
    --border-default: #2C4A35;
    --link-color: #7BD08A;
    --link-hover: #A8E2B0;
    --btn-primary-bg: #3DA34E;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #56BA65;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}