/* Hmonster Deals — design tokens
   Littoral brand system (Coastal v1.0).
   Swap this file to reskin the theme — every visual choice elsewhere reads
   from --hmd-* custom properties. */

:root {
  /* --- Slate / Stone ramp (Littoral) --- */
  --hmd-slate:     #556b7d; /* primary */
  --hmd-slate-dk:  #445a6a; /* hover */
  --hmd-slate-dkr: #3d5060; /* deep */
  --hmd-stone:     #7d9aaa; /* accent / light slate */
  --hmd-stone-lt:  #9ab0bc; /* fog / light accent */
  --hmd-stone-xlt: #b8ccd4; /* very light */

  /* --- Neutrals (light) --- */
  --hmd-bg:             #f4f5f6;
  --hmd-bg-alt:         #eceef0;
  --hmd-surface:        #eceef0;
  --hmd-surface-alt:    #e0e3e6;
  --hmd-border:         #cdd3d8;
  --hmd-border-strong:  #b4bec6;
  --hmd-text:           #1e2a32;
  --hmd-text-strong:    #1e2a32;
  --hmd-text-muted:     #7a8a96;
  --hmd-text-soft:      #5a6a76;
  --hmd-text-faint:     #9ab0bc;
  --hmd-accent-bg:      color-mix(in srgb, #556b7d 10%, #eceef0);
  --hmd-accent-fg:      #3d5060;
  --hmd-ink:            #1e2a32;
  --hmd-ink-soft:       #2d3d4a;

  /* --- Brand aliases --- */
  --hmd-brand:          var(--hmd-slate);
  --hmd-brand-hover:    var(--hmd-slate-dk);
  --hmd-brand-ink:      #ffffff;
  --hmd-link:           var(--hmd-slate);
  --hmd-link-hover:     var(--hmd-slate-dk);
  --hmd-ring:           rgb(85 107 125 / 0.20);

  /* --- Status --- */
  --hmd-destructive:    #b91c1c;
  --hmd-success:        #4a7c59;
  --hmd-success-bg:     color-mix(in srgb, #4a7c59 14%, #eceef0);
  --hmd-success-fg:     #4a7c59;
  --hmd-warning-bg:     color-mix(in srgb, #c8a84b 14%, #eceef0);
  --hmd-warning-fg:     #a16207;
  --hmd-danger-bg:      color-mix(in srgb, #b91c1c 10%, #eceef0);
  --hmd-danger-fg:      #b91c1c;

  /* --- Typography --- */
  --hmd-font-display: Impact, "Haettenschweiler", "Arial Narrow Bold", Anton, sans-serif;
  --hmd-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hmd-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --hmd-text-xs:   0.6875rem;  /* 11px */
  --hmd-text-sm:   0.8125rem;  /* 13px */
  --hmd-text-base: 1rem;       /* 16px */
  --hmd-text-lg:   1.125rem;   /* 18px */
  --hmd-text-xl:   1.375rem;   /* 22px */
  --hmd-text-2xl:  1.75rem;    /* 28px */
  --hmd-text-3xl:  2.25rem;    /* 36px */
  --hmd-text-4xl:  3rem;       /* 48px */
  --hmd-text-5xl:  4.5rem;     /* 72px */

  --hmd-leading-tight:  1.1;
  --hmd-leading-snug:   1.3;
  --hmd-leading-normal: 1.55;
  --hmd-leading-loose:  1.7;

  --hmd-track-display: -0.02em;
  --hmd-track-tight:   -0.015em;
  --hmd-track-mono:    0.12em;
  --hmd-track-mono-sm: 0.08em;

  --hmd-weight-regular:  400;
  --hmd-weight-medium:   500;
  --hmd-weight-semibold: 600;
  --hmd-weight-bold:     700;
  --hmd-weight-extra:    800;
  --hmd-weight-black:    900;

  /* --- Spacing (8pt base) --- */
  --hmd-space-0:  0;
  --hmd-space-1:  0.25rem;
  --hmd-space-2:  0.5rem;
  --hmd-space-3:  0.75rem;
  --hmd-space-4:  1rem;
  --hmd-space-5:  1.25rem;
  --hmd-space-6:  1.5rem;
  --hmd-space-8:  2rem;
  --hmd-space-10: 2.5rem;
  --hmd-space-12: 3rem;
  --hmd-space-16: 4rem;
  --hmd-space-20: 5rem;
  --hmd-space-24: 6rem;

  /* --- Radii --- */
  --hmd-radius-xs:   4px;
  --hmd-radius:      6px;
  --hmd-radius-md:   6px;
  --hmd-radius-lg:   8px;
  --hmd-radius-xl:   12px;
  --hmd-radius-full: 9999px;

  /* --- Shadows --- */
  --hmd-shadow-xs: 0 1px 2px 0 rgba(30, 42, 50, 0.04);
  --hmd-shadow-sm: 0 1px 3px 0 rgba(30, 42, 50, 0.06);
  --hmd-shadow-md: 0 4px 12px -2px rgba(30, 42, 50, 0.10);
  --hmd-shadow-lg: 0 8px 24px rgba(30, 42, 50, 0.10);
  --hmd-shadow-xl: 0 20px 40px -8px rgba(30, 42, 50, 0.16);

  /* --- Layout --- */
  --hmd-container-max: 1400px;
  --hmd-container-pad: 20px;
  --hmd-header-height: 72px;
  --hmd-section-pad:   56px;

  /* --- Motion --- */
  --hmd-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --hmd-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --hmd-duration-fast: 150ms;
  --hmd-duration-med:  200ms;
  --hmd-duration-slow: 600ms;
}

@media (min-width: 768px) {
  :root {
    --hmd-container-pad: 32px;
    --hmd-section-pad:   80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hmd-duration-fast: 0ms;
    --hmd-duration-med:  0ms;
    --hmd-duration-slow: 0ms;
  }
}

/* --- Dark mode --- */
[data-theme="dark"] {
  --hmd-bg:             #111820;
  --hmd-bg-alt:         #18222c;
  --hmd-surface:        #18222c;
  --hmd-surface-alt:    #1e2d3a;
  --hmd-border:         #28383f;
  --hmd-border-strong:  #3a4d5a;
  --hmd-text:           #dce6ec;
  --hmd-text-strong:    #dce6ec;
  --hmd-text-muted:     #6a7e8a;
  --hmd-text-soft:      #8fa0ac;
  --hmd-text-faint:     #4a6070;
  --hmd-accent-bg:      rgba(85, 107, 125, 0.18);
  --hmd-accent-fg:      #9ab0bc;
  --hmd-ink:            #dce6ec;
  --hmd-ink-soft:       #b8c8d4;
  --hmd-brand:          #7d9aaa;
  --hmd-brand-hover:    #6b8898;
  --hmd-link:           #7d9aaa;
  --hmd-link-hover:     #6b8898;
  --hmd-ring:           rgb(125 154 170 / 0.25);
  --hmd-success-bg:     rgba(74, 124, 89, 0.18);
  --hmd-success-fg:     #6aaa84;
  --hmd-danger-bg:      rgba(185, 28, 28, 0.15);
  --hmd-danger-fg:      #f87171;
  --hmd-warning-bg:     rgba(200, 168, 75, 0.15);
  --hmd-warning-fg:     #e8c860;
}