/* ==========================================================================
   HoundSquare Design System — Token Layer
   Mirrors the /houndsquare/design-system concept. Single source of truth for
   --hs-* CSS custom properties. Consumed by pages, layouts, AND web components
   (which read these through their open shadow DOM). Dark mode is a token
   override via [data-theme="dark"] — components need no changes.

   Also bridges webapp-core's --wc-* component tokens onto the warm HS palette
   so the shared login modal / user-menu inherit the brand.
   ========================================================================== */

:root {
  /* --- Brand ramp: Amber (primary) --- */
  --hs-color-amber-50:  #FDF7EC;
  --hs-color-amber-100: #FAECCF;
  --hs-color-amber-200: #F5D99C;
  --hs-color-amber-300: #EFC468;
  --hs-color-amber-400: #E9AE3B;
  --hs-color-amber-500: #DB971C;
  --hs-color-amber-600: #B87A13;
  --hs-color-amber-700: #8F5E10;
  --hs-color-amber-800: #6B470E;
  --hs-color-amber-900: #48300A;

  /* --- Brand ramp: Terracotta (secondary/accent) --- */
  --hs-color-terracotta-50:  #FBF0EC;
  --hs-color-terracotta-100: #F6DBD1;
  --hs-color-terracotta-200: #ECB6A4;
  --hs-color-terracotta-300: #E19177;
  --hs-color-terracotta-400: #D66E4E;
  --hs-color-terracotta-500: #C5502F;
  --hs-color-terracotta-600: #A34126;
  --hs-color-terracotta-700: #7E321D;
  --hs-color-terracotta-800: #5A2415;
  --hs-color-terracotta-900: #3A170D;

  /* --- Brand ramp: Sage (tertiary/success) --- */
  --hs-color-sage-50:  #F0F4F0;
  --hs-color-sage-100: #DCE7DB;
  --hs-color-sage-200: #B9CFB7;
  --hs-color-sage-300: #94B591;
  --hs-color-sage-400: #6F9B6C;
  --hs-color-sage-500: #54804F;
  --hs-color-sage-600: #436A3F;
  --hs-color-sage-700: #345231;
  --hs-color-sage-800: #253A23;
  --hs-color-sage-900: #172416;

  /* --- Neutrals (warm gray) --- */
  --hs-color-neutral-0:   #FFFFFF;
  --hs-color-neutral-50:  #FAF9F7;
  --hs-color-neutral-100: #F2F0EC;
  --hs-color-neutral-200: #E4E1DA;
  --hs-color-neutral-300: #CFC9BF;
  --hs-color-neutral-400: #A8A093;
  --hs-color-neutral-500: #7D766A;
  --hs-color-neutral-600: #5E584E;
  --hs-color-neutral-700: #443F38;
  --hs-color-neutral-800: #2C2823;
  --hs-color-neutral-900: #1A1712;

  /* --- Semantic colors (light) --- */
  --hs-color-background:       var(--hs-color-neutral-50);
  --hs-color-surface:          var(--hs-color-neutral-0);
  --hs-color-surface-raised:   var(--hs-color-neutral-100);
  --hs-color-border:           var(--hs-color-neutral-200);
  --hs-color-border-strong:    var(--hs-color-neutral-300);
  --hs-color-foreground:       var(--hs-color-neutral-800);
  --hs-color-foreground-muted: var(--hs-color-neutral-500);
  --hs-color-foreground-body:  var(--hs-color-neutral-700);
  --hs-color-primary:          var(--hs-color-amber-600);
  --hs-color-primary-hover:    var(--hs-color-amber-700);
  --hs-color-accent:           var(--hs-color-terracotta-600);
  --hs-color-accent-hover:     var(--hs-color-terracotta-700);
  --hs-color-success:          var(--hs-color-sage-600);
  --hs-color-warning:          var(--hs-color-amber-500);
  --hs-color-danger:           #C0392B;
  --hs-color-info:             #2C6E8F;
  --hs-color-on-primary:       #FFFFFF;
  --hs-color-on-accent:        #FFFFFF;
  --hs-color-on-success:       #FFFFFF;

  /* Semantic tints (badges, soft backgrounds) */
  --hs-color-success-tint:   var(--hs-color-sage-100);
  --hs-color-success-text:   var(--hs-color-sage-700);
  --hs-color-warning-tint:   var(--hs-color-amber-100);
  --hs-color-warning-text:   var(--hs-color-amber-800);
  --hs-color-danger-tint:    #F7E0DD;
  --hs-color-danger-text:    #8A281D;
  --hs-color-info-tint:      #DCEAF1;
  --hs-color-info-text:      #1F5069;

  /* --- Typography --- */
  --hs-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hs-font-display: var(--hs-font-sans);
  --hs-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --hs-font-size-xs:  0.75rem;
  --hs-font-size-sm:  0.875rem;
  --hs-font-size-base: 1rem;
  --hs-font-size-lg:  1.125rem;
  --hs-font-size-xl:  1.5rem;
  --hs-font-size-2xl: 2rem;
  --hs-font-size-3xl: 2.5rem;

  --hs-line-height-xs:  1.4;
  --hs-line-height-sm:  1.45;
  --hs-line-height-base: 1.55;
  --hs-line-height-lg:  1.5;
  --hs-line-height-xl:  1.35;
  --hs-line-height-2xl: 1.25;
  --hs-line-height-3xl: 1.2;

  --hs-font-weight-normal: 400;
  --hs-font-weight-medium: 500;
  --hs-font-weight-semibold: 600;
  --hs-font-weight-bold: 700;

  /* --- Spacing (4px base) --- */
  --hs-space-0:  0;
  --hs-space-1:  4px;
  --hs-space-2:  8px;
  --hs-space-3:  12px;
  --hs-space-4:  16px;
  --hs-space-5:  20px;
  --hs-space-6:  24px;
  --hs-space-8:  32px;
  --hs-space-10: 40px;
  --hs-space-12: 48px;
  --hs-space-16: 64px;

  /* --- Radius --- */
  --hs-radius-sm:   4px;
  --hs-radius-md:   8px;
  --hs-radius-lg:   12px;
  --hs-radius-xl:   20px;
  --hs-radius-full: 9999px;

  /* --- Elevation (warm-tinted shadows) --- */
  --hs-elevation-0: none;
  --hs-elevation-1: 0 1px 2px rgba(68,63,56,0.08);
  --hs-elevation-2: 0 2px 8px rgba(68,63,56,0.10);
  --hs-elevation-3: 0 8px 24px rgba(68,63,56,0.14);
  --hs-elevation-4: 0 16px 48px rgba(68,63,56,0.18);

  /* --- Motion --- */
  --hs-duration-fast: 120ms;
  --hs-duration-base: 200ms;
  --hs-duration-slow: 320ms;
  --hs-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --hs-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --hs-ease-decelerate: cubic-bezier(0, 0, 0, 1);

  /* --- Layout metrics (consumer shell) --- */
  --hs-header-height: 64px;
  --hs-sidebar-width: 248px;
  --hs-content-max: 1180px;

  /* ------------------------------------------------------------------
     webapp-core component bridge — map --wc-* onto the warm HS palette so
     <wc-login-form>, <wc-user-menu>, etc. inherit the brand.
     ------------------------------------------------------------------ */
  --wc-primary-color: var(--hs-color-primary);
  --wc-primary-hover: var(--hs-color-primary-hover);
  --wc-text-color:    var(--hs-color-foreground);
  --wc-text-muted:    var(--hs-color-foreground-muted);
  --wc-bg-color:      var(--hs-color-surface);
  --wc-bg-secondary:  var(--hs-color-surface-raised);
  --wc-border-color:  var(--hs-color-border);
  --wc-border-radius: var(--hs-radius-md);
  --wc-font-family:   var(--hs-font-sans);
  --wc-font-size:     var(--hs-font-size-sm);
  --wc-error-color:   var(--hs-color-danger);
  --wc-success-color: var(--hs-color-success);
  --wc-overlay-bg:    rgba(26,23,18,0.5);
}

/* ==========================================================================
   Dark mode — token override only. Applied via [data-theme="dark"].
   ========================================================================== */
[data-theme="dark"] {
  --hs-color-background:       #1A1712; /* neutral-900 */
  --hs-color-surface:          #2C2823; /* neutral-800 */
  --hs-color-surface-raised:   #443F38; /* neutral-700 */
  --hs-color-border:           #5E584E; /* neutral-600 */
  --hs-color-border-strong:    #7D766A; /* neutral-500 */
  --hs-color-foreground:       #FAF9F7; /* neutral-50 */
  --hs-color-foreground-muted: #A8A093; /* neutral-400 */
  --hs-color-foreground-body:  #E4E1DA; /* neutral-200 */
  --hs-color-primary:          #E9AE3B; /* amber-400 */
  --hs-color-primary-hover:    #EFC468; /* amber-300 */
  --hs-color-accent:           #D66E4E; /* terracotta-400 */
  --hs-color-accent-hover:     #E19177; /* terracotta-300 */
  --hs-color-success:          #6F9B6C; /* sage-400 */
  --hs-color-warning:          #EFC468; /* amber-300 */
  --hs-color-danger:           #E57368;
  --hs-color-info:             #5FA3C4;
  --hs-color-on-primary:       #1A1712;
  --hs-color-on-accent:        #1A1712;
  --hs-color-on-success:       #1A1712;

  --hs-color-success-tint: #253A23;
  --hs-color-success-text: #B9CFB7;
  --hs-color-warning-tint: #48300A;
  --hs-color-warning-text: #F5D99C;
  --hs-color-danger-tint:  #3A170D;
  --hs-color-danger-text:  #ECB6A4;
  --hs-color-info-tint:    #1F5069;
  --hs-color-info-text:    #DCEAF1;

  --hs-elevation-1: 0 1px 2px rgba(0,0,0,0.30);
  --hs-elevation-2: 0 2px 8px rgba(0,0,0,0.36);
  --hs-elevation-3: 0 8px 24px rgba(0,0,0,0.44);
  --hs-elevation-4: 0 16px 48px rgba(0,0,0,0.52);

  --wc-overlay-bg: rgba(0,0,0,0.62);
}