/* ============================================================
   Modoona Design System — CSS Custom Properties
   Concept: Terra Serena v2.0
   Version: 2.0.0 | 2026-02-17
   Generator: AEOS Design System Generator

   Architecture: 3-tier (Primitive > Semantic > Component)
   Naming: --ds-prim-* | --ds-* | --ds-comp-*
   ============================================================ */

:root {
  /* --------------------------------------------------------
     TIER 1: PRIMITIVES — Raw design values
     -------------------------------------------------------- */

  /* Sage Ramp (Primary UI) */
  --ds-prim-color-sage-50: #F0F4EF;
  --ds-prim-color-sage-100: #DDE8DB;
  --ds-prim-color-sage-200: #C2D4BF;
  --ds-prim-color-sage-300: #A7BFA3;
  --ds-prim-color-sage-400: #8FAC8A;
  --ds-prim-color-sage-500: #7D9A78;
  --ds-prim-color-sage-600: #6B8566;
  --ds-prim-color-sage-700: #5B7C56;
  --ds-prim-color-sage-800: #4A6847;
  --ds-prim-color-sage-900: #3A4C38;

  /* Terracotta Ramp (Brand Lead) */
  --ds-prim-color-terracotta-50: #FBF3EF;
  --ds-prim-color-terracotta-100: #F4E1D8;
  --ds-prim-color-terracotta-200: #E8C7B8;
  --ds-prim-color-terracotta-300: #DCAD98;
  --ds-prim-color-terracotta-400: #D09882;
  --ds-prim-color-terracotta-500: #C4846C;
  --ds-prim-color-terracotta-600: #B0735C;
  --ds-prim-color-terracotta-700: #9A624E;
  --ds-prim-color-terracotta-800: #7E5040;
  --ds-prim-color-terracotta-900: #633F33;

  /* Amber Ramp (IA Accent) */
  --ds-prim-color-amber-50: #FBF6EE;
  --ds-prim-color-amber-100: #F6ECDA;
  --ds-prim-color-amber-200: #EEDDBE;
  --ds-prim-color-amber-300: #E4CC9F;
  --ds-prim-color-amber-400: #DCBA84;
  --ds-prim-color-amber-500: #D4A76A;
  --ds-prim-color-amber-600: #C49A5E;
  --ds-prim-color-amber-700: #B48D52;
  --ds-prim-color-amber-800: #987545;
  --ds-prim-color-amber-900: #7C5E38;

  /* Neutral Ramp (Brand-Anchored Warm Tint) */
  --ds-prim-color-neutral-50: #F5F2ED;
  --ds-prim-color-neutral-100: #EBE7E1;
  --ds-prim-color-neutral-200: #E5E0DA;
  --ds-prim-color-neutral-300: #D5D0CA;
  --ds-prim-color-neutral-400: #A09A93;
  --ds-prim-color-neutral-500: #7A756F;
  --ds-prim-color-neutral-600: #5E5955;
  --ds-prim-color-neutral-700: #4A4543;
  --ds-prim-color-neutral-800: #3B3835;
  --ds-prim-color-neutral-900: #2D2A26;

  /* Specials */
  --ds-prim-color-white: #FFFFFF;
  --ds-prim-color-soft-cream: #FDFBF8;

  /* Feedback */
  --ds-prim-color-success-tint: #EEF4ED;
  --ds-prim-color-success-strong: #5A7A55;
  --ds-prim-color-warning-tint: #FBF6E8;
  --ds-prim-color-warning-strong: #C4A24E;
  --ds-prim-color-error-tint: #FBF0EE;
  --ds-prim-color-error-strong: #C4786C;
  --ds-prim-color-info-tint: #EEF3F7;
  --ds-prim-color-info-strong: #527592;

  /* Typography Primitives */
  --ds-prim-font-family-heading: 'DM Sans', system-ui, sans-serif;
  --ds-prim-font-family-body: 'Source Serif 4', Georgia, serif;
  --ds-prim-font-size-56: 56px;
  --ds-prim-font-size-44: 44px;
  --ds-prim-font-size-34: 34px;
  --ds-prim-font-size-28: 28px;
  --ds-prim-font-size-22: 22px;
  --ds-prim-font-size-20: 20px;
  --ds-prim-font-size-18: 18px;
  --ds-prim-font-size-16: 16px;
  --ds-prim-font-size-14: 14px;
  --ds-prim-font-size-12: 12px;
  --ds-prim-font-weight-regular: 400;
  --ds-prim-font-weight-medium: 500;
  --ds-prim-font-weight-semibold: 600;
  --ds-prim-font-weight-bold: 700;

  /* Spacing Primitives (8px Grid) */
  --ds-prim-spacing-4: 4px;
  --ds-prim-spacing-8: 8px;
  --ds-prim-spacing-12: 12px;
  --ds-prim-spacing-16: 16px;
  --ds-prim-spacing-24: 24px;
  --ds-prim-spacing-32: 32px;
  --ds-prim-spacing-48: 48px;
  --ds-prim-spacing-64: 64px;
  --ds-prim-spacing-96: 96px;
  --ds-prim-spacing-128: 128px;

  /* Shape Primitives */
  --ds-prim-radius-6: 6px;
  --ds-prim-radius-8: 8px;
  --ds-prim-radius-12: 12px;
  --ds-prim-radius-16: 16px;
  --ds-prim-radius-full: 9999px;
  --ds-prim-border-thin: 1px;
  --ds-prim-border-medium: 2px;
  --ds-prim-border-thick: 4px;

  /* --------------------------------------------------------
     TIER 2: SEMANTICS — Purpose-named aliases
     -------------------------------------------------------- */

  /* Text Colors */
  --ds-color-text-primary: var(--ds-prim-color-neutral-900);
  --ds-color-text-secondary: var(--ds-prim-color-neutral-700);
  --ds-color-text-muted: var(--ds-prim-color-neutral-500);
  --ds-color-text-disabled: var(--ds-prim-color-neutral-400);
  --ds-color-text-on-action: var(--ds-prim-color-white);
  --ds-color-text-inverse: var(--ds-prim-color-neutral-50);

  /* Surface Colors */
  --ds-color-surface-default: var(--ds-prim-color-soft-cream);
  --ds-color-surface-subtle: var(--ds-prim-color-neutral-50);
  --ds-color-surface-elevated: var(--ds-prim-color-white);
  --ds-color-surface-inverse: var(--ds-prim-color-neutral-900);

  /* Action Colors */
  --ds-color-action-primary: var(--ds-prim-color-sage-700);
  --ds-color-action-primary-hover: var(--ds-prim-color-sage-800);
  --ds-color-action-primary-active: var(--ds-prim-color-sage-900);
  --ds-color-action-secondary: var(--ds-prim-color-terracotta-500);
  --ds-color-action-secondary-hover: var(--ds-prim-color-terracotta-600);
  --ds-color-action-destructive: var(--ds-prim-color-error-strong);
  --ds-color-action-disabled-bg: var(--ds-prim-color-neutral-100);
  --ds-color-action-disabled-text: var(--ds-prim-color-neutral-400);

  /* Border Colors */
  --ds-color-border-default: var(--ds-prim-color-neutral-200);
  --ds-color-border-strong: var(--ds-prim-color-neutral-400);
  --ds-color-border-subtle: var(--ds-prim-color-neutral-100);
  --ds-color-border-focus: var(--ds-prim-color-sage-700);

  /* Feedback Colors */
  --ds-color-feedback-success: var(--ds-prim-color-success-strong);
  --ds-color-feedback-success-tint: var(--ds-prim-color-success-tint);
  --ds-color-feedback-warning: var(--ds-prim-color-warning-strong);
  --ds-color-feedback-warning-tint: var(--ds-prim-color-warning-tint);
  --ds-color-feedback-error: var(--ds-prim-color-error-strong);
  --ds-color-feedback-error-tint: var(--ds-prim-color-error-tint);
  --ds-color-feedback-info: var(--ds-prim-color-info-strong);
  --ds-color-feedback-info-tint: var(--ds-prim-color-info-tint);

  /* Decorative Colors */
  --ds-color-decorative-sage: var(--ds-prim-color-sage-500);
  --ds-color-decorative-terracotta: var(--ds-prim-color-terracotta-500);
  --ds-color-decorative-amber: var(--ds-prim-color-amber-500);
  --ds-color-decorative-rating: var(--ds-prim-color-amber-500);

  /* Typography Semantics */
  --ds-font-family-heading: var(--ds-prim-font-family-heading);
  --ds-font-family-body: var(--ds-prim-font-family-body);
  --ds-font-size-4xl: var(--ds-prim-font-size-56);
  --ds-font-size-3xl: var(--ds-prim-font-size-44);
  --ds-font-size-2xl: var(--ds-prim-font-size-34);
  --ds-font-size-xl: var(--ds-prim-font-size-28);
  --ds-font-size-lg: var(--ds-prim-font-size-22);
  --ds-font-size-base: var(--ds-prim-font-size-16);
  --ds-font-size-sm: var(--ds-prim-font-size-14);
  --ds-font-size-xs: var(--ds-prim-font-size-12);
  --ds-font-weight-regular: var(--ds-prim-font-weight-regular);
  --ds-font-weight-medium: var(--ds-prim-font-weight-medium);
  --ds-font-weight-semibold: var(--ds-prim-font-weight-semibold);
  --ds-font-weight-bold: var(--ds-prim-font-weight-bold);
  --ds-font-lineHeight-tight: 1.15;
  --ds-font-lineHeight-snug: 1.3;
  --ds-font-lineHeight-normal: 1.4;
  --ds-font-lineHeight-relaxed: 1.6;
  --ds-font-letterSpacing-tight: -0.02em;
  --ds-font-letterSpacing-snug: -0.01em;
  --ds-font-letterSpacing-normal: 0;
  --ds-font-letterSpacing-wide: 0.02em;
  --ds-font-letterSpacing-wider: 0.03em;

  /* Spacing Semantics */
  --ds-spacing-4: var(--ds-prim-spacing-4);
  --ds-spacing-8: var(--ds-prim-spacing-8);
  --ds-spacing-12: var(--ds-prim-spacing-12);
  --ds-spacing-16: var(--ds-prim-spacing-16);
  --ds-spacing-24: var(--ds-prim-spacing-24);
  --ds-spacing-32: var(--ds-prim-spacing-32);
  --ds-spacing-48: var(--ds-prim-spacing-48);
  --ds-spacing-64: var(--ds-prim-spacing-64);
  --ds-spacing-96: var(--ds-prim-spacing-96);
  --ds-spacing-128: var(--ds-prim-spacing-128);
  --ds-spacing-content-gap: var(--ds-prim-spacing-16);
  --ds-spacing-content-gap-lg: var(--ds-prim-spacing-24);
  --ds-spacing-section-gap: var(--ds-prim-spacing-48);
  --ds-spacing-section-gap-lg: var(--ds-prim-spacing-64);
  --ds-spacing-inline-xs: var(--ds-prim-spacing-4);
  --ds-spacing-inline-sm: var(--ds-prim-spacing-8);
  --ds-spacing-interactive-sm: var(--ds-prim-spacing-8);
  --ds-spacing-interactive-md: var(--ds-prim-spacing-16);
  --ds-spacing-interactive-lg: var(--ds-prim-spacing-24);
  --ds-spacing-page-margin: var(--ds-prim-spacing-24);
  --ds-spacing-page-margin-lg: var(--ds-prim-spacing-48);
  --ds-spacing-page-content-max: 840px;
  --ds-spacing-touch-target-min: 44px;

  /* Shape Semantics */
  --ds-shape-radius-sm: var(--ds-prim-radius-6);
  --ds-shape-radius-md: var(--ds-prim-radius-8);
  --ds-shape-radius-lg: var(--ds-prim-radius-12);
  --ds-shape-radius-xl: var(--ds-prim-radius-16);
  --ds-shape-radius-full: var(--ds-prim-radius-full);
  --ds-shape-border-thin: var(--ds-prim-border-thin);
  --ds-shape-border-medium: var(--ds-prim-border-medium);
  --ds-shape-border-thick: var(--ds-prim-border-thick);

  /* Elevation — brand-tinted shadows using rgba(45, 42, 38) */
  --ds-elevation-shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.08), 0 1px 2px rgba(45, 42, 38, 0.06);
  --ds-elevation-shadow-md: 0 4px 6px rgba(45, 42, 38, 0.07), 0 2px 4px rgba(45, 42, 38, 0.06);
  --ds-elevation-shadow-lg: 0 10px 15px rgba(45, 42, 38, 0.10), 0 4px 6px rgba(45, 42, 38, 0.05);
  --ds-elevation-shadow-xl: 0 20px 25px rgba(45, 42, 38, 0.10), 0 8px 10px rgba(45, 42, 38, 0.04);
  --ds-elevation-z-base: 0;
  --ds-elevation-z-dropdown: 100;
  --ds-elevation-z-sticky: 200;
  --ds-elevation-z-modal: 300;
  --ds-elevation-z-popover: 400;
  --ds-elevation-z-toast: 500;

  /* Motion */
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-fast: 150ms;
  --ds-motion-duration-normal: 250ms;
  --ds-motion-duration-slow: 400ms;
  --ds-motion-duration-slower: 600ms;
  --ds-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --ds-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --ds-motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Opacity */
  --ds-opacity-disabled: 0.5;
  --ds-opacity-overlay: 0.6;
  --ds-opacity-hover: 0.08;

  /* --------------------------------------------------------
     TIER 3: COMPONENTS — Usage-specific tokens
     -------------------------------------------------------- */

  /* Button */
  --ds-comp-button-bg: var(--ds-color-action-primary);
  --ds-comp-button-bg-hover: var(--ds-color-action-primary-hover);
  --ds-comp-button-bg-active: var(--ds-color-action-primary-active);
  --ds-comp-button-bg-disabled: var(--ds-color-action-disabled-bg);
  --ds-comp-button-text: var(--ds-color-text-on-action);
  --ds-comp-button-text-disabled: var(--ds-color-action-disabled-text);
  --ds-comp-button-radius: var(--ds-shape-radius-md);
  --ds-comp-button-padding-x: var(--ds-spacing-interactive-lg);
  --ds-comp-button-padding-y: var(--ds-spacing-12); /* 12px — aligned with Kadence paddingY */
  --ds-comp-button-font-family: var(--ds-font-family-heading);
  --ds-comp-button-font-weight: var(--ds-font-weight-medium);
  --ds-comp-button-font-size: var(--ds-font-size-sm);

  /* Card */
  --ds-comp-card-bg: var(--ds-color-surface-elevated);
  --ds-comp-card-shadow: var(--ds-elevation-shadow-sm);
  --ds-comp-card-shadow-hover: var(--ds-elevation-shadow-md);
  --ds-comp-card-radius: var(--ds-shape-radius-lg);
  --ds-comp-card-padding: var(--ds-spacing-24);

  /* Input */
  --ds-comp-input-bg: var(--ds-color-surface-elevated);
  --ds-comp-input-border: var(--ds-color-border-default);
  --ds-comp-input-border-focus: var(--ds-color-border-focus);
  --ds-comp-input-border-error: var(--ds-color-feedback-error);
  --ds-comp-input-radius: var(--ds-shape-radius-md);
  --ds-comp-input-padding-x: var(--ds-spacing-16);
  --ds-comp-input-padding-y: var(--ds-spacing-12);
  --ds-comp-input-font-family: var(--ds-font-family-body);
  --ds-comp-input-font-size: var(--ds-font-size-base);

  /* Score Badge */
  --ds-comp-score-high-bg: var(--ds-color-feedback-success);
  --ds-comp-score-high-text: var(--ds-prim-color-white);
  --ds-comp-score-medium-bg: var(--ds-color-feedback-warning);
  --ds-comp-score-medium-text: var(--ds-color-text-primary);
  --ds-comp-score-low-bg: var(--ds-color-feedback-error);
  --ds-comp-score-low-text: var(--ds-prim-color-white);
  --ds-comp-score-radius: var(--ds-shape-radius-full);
  --ds-comp-score-size: 48px;
  --ds-comp-score-size-compact: 24px;
  --ds-comp-score-font-family: var(--ds-font-family-heading);
  --ds-comp-score-font-weight: var(--ds-font-weight-bold);

  /* --------------------------------------------------------
     KADENCE BRIDGE — Maps DS tokens to Kadence palette slots
     -------------------------------------------------------- */
  --global-palette1: var(--ds-color-action-primary);
  --global-palette2: var(--ds-color-action-secondary);
  --global-palette3: var(--ds-color-action-primary-hover);
  --global-palette4: var(--ds-color-text-primary);
  --global-palette5: var(--ds-color-text-secondary);
  --global-palette6: var(--ds-color-text-muted);
  --global-palette7: var(--ds-color-text-disabled);
  --global-palette8: var(--ds-color-surface-subtle);
  --global-palette9: var(--ds-color-surface-default);
  --global-palette10: var(--ds-color-surface-elevated);
  --global-palette11: var(--ds-color-feedback-success);
  --global-palette12: var(--ds-color-feedback-info);
  --global-palette13: var(--ds-color-feedback-error);
  --global-palette14: var(--ds-color-feedback-warning);
  --global-palette15: var(--ds-color-decorative-amber);
}

/* ============================================================
   DARK THEME — Semantic swap only, no new primitives
   ============================================================ */
[data-theme="dark"] {
  --ds-color-text-primary: var(--ds-prim-color-neutral-50);
  --ds-color-text-secondary: #C8C3BC;
  --ds-color-text-muted: #928C86;
  --ds-color-text-disabled: var(--ds-prim-color-neutral-600);
  --ds-color-text-on-action: var(--ds-prim-color-white);
  --ds-color-text-inverse: var(--ds-prim-color-neutral-900);

  --ds-color-surface-default: #1C1A18;
  --ds-color-surface-subtle: #242220;
  --ds-color-surface-elevated: #2E2B28;
  --ds-color-surface-inverse: var(--ds-prim-color-neutral-50);

  --ds-color-action-primary: var(--ds-prim-color-sage-700);
  --ds-color-action-primary-hover: var(--ds-prim-color-sage-800);
  --ds-color-action-primary-active: var(--ds-prim-color-sage-900);

  --ds-color-border-default: #3A3735;
  --ds-color-border-strong: var(--ds-prim-color-neutral-600);
  --ds-color-border-subtle: #2A2725;
  --ds-color-border-focus: var(--ds-prim-color-sage-500);

  --ds-elevation-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15);
  --ds-elevation-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.15);
  --ds-elevation-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.25), 0 4px 6px rgba(0, 0, 0, 0.12);
  --ds-elevation-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.10);
}

/* ============================================================
   REDUCED MOTION — Accessibility override
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-duration-fast: 0ms;
    --ds-motion-duration-normal: 0ms;
    --ds-motion-duration-slow: 0ms;
    --ds-motion-duration-slower: 0ms;
  }
  /* Note: No blanket * { animation-duration: 0ms !important } — essential
     animations (loading spinners, progress bars) should slow down, not disappear.
     Components needing reduced motion opt in via the token overrides above. */
}

/* ============================================================
   FOCUS STYLES — Keyboard accessibility
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--ds-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--ds-shape-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}