/* ============================================================
   SUN HOME — Design tokens (local copy for Product Dashboard)
   Verbatim color / spacing / radii / motion tokens from the
   Sun Home Design System (colors_and_type.css).
   FLAGGED SUBSTITUTIONS (files not shipped with the system):
     • Suisse Int'l  → Hanken Grotesk  (neutral grotesque, true to brand voice)
     • Suisse Mono   → IBM Plex Mono   (design-system-sanctioned fallback)
   Brand voice, scale, and every numeric token are unchanged.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* ========= BRAND ========= */
  --sh-sun:           #FF6B00;
  --sh-sun-bright:    #FF5600;
  --sh-sun-warm:      #FF8C00;
  --sh-sun-dark:      #CC5500;
  --sh-sun-light:     #FF8C33;

  --sh-sun-ghost:     rgba(255, 107, 0, 0.06);
  --sh-sun-subtle:    rgba(255, 107, 0, 0.10);
  --sh-sun-muted:     rgba(255, 107, 0, 0.18);
  --sh-sun-border:    rgba(255, 107, 0, 0.28);
  --sh-sun-emphasis:  rgba(255, 107, 0, 0.40);

  /* ========= COLD PLUNGE ACCENT ========= */
  --sh-ice:           #4FC3F7;
  --sh-ice-dark:      #0288D1;
  --sh-ice-light:     #B3E5FC;
  --sh-ice-subtle:    rgba(79, 195, 247, 0.10);
  --sh-ice-border:    rgba(79, 195, 247, 0.28);

  /* ========= WEBSITE PALETTE (LIGHT, WARM) ========= */
  --sh-ink:           #353535;
  --sh-ink-deep:      #212020;
  --sh-ink-soft:      #373636;
  --sh-ink-muted:     #707070;
  --sh-ink-whisper:   #9A9BA8;

  --sh-paper:         #FAFAFA;
  --sh-paper-warm:    #FAF9F8;
  --sh-paper-linen:   #FAF5F0;
  --sh-sand:          #EBE4DD;
  --sh-sand-light:    #EBE7E1;
  --sh-stone:         #F3F1F0;

  --sh-hairline:      rgba(222, 222, 222, 0.7);
  --sh-hairline-soft: rgba(222, 222, 222, 0.4);
  --sh-hairline-faint:rgba(222, 222, 222, 0.27);

  --sh-obsidian:      #212020;
  --sh-charcoal:      #1C1C1C;
  --sh-coal:          #373636;
  --sh-navy:          #14153A;

  /* ========= APP PALETTE (DARK) ========= */
  --sh-bg:            #0A0A0A;
  --sh-surface:       #1A1A1A;
  --sh-surface-high:  #242424;
  --sh-border-dark:   #2A2A2A;
  --sh-border-active: var(--sh-sun);
  --sh-overlay:       rgba(0, 0, 0, 0.60);

  --sh-on-bg:         #FFFFFF;
  --sh-on-bg-muted:   #AAAAAA;
  --sh-on-bg-faint:   #555555;

  /* ========= STATUS ========= */
  --sh-online:        #4CAF50;
  --sh-offline:       #666666;
  --sh-warning:       #FFC107;
  --sh-error:         #F44336;

  /* ========= TYPE STACKS (substituted faces) ========= */
  --sh-font-sans:     "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --sh-font-mono:     "IBM Plex Mono", ui-monospace, monospace;
  --sh-font-display:  "Poppins", system-ui, sans-serif;

  /* ========= TYPE SIZES ========= */
  --sh-text-xs:       12px;
  --sh-text-sm:       14px;
  --sh-text-base:     16px;
  --sh-text-lg:       18px;
  --sh-text-xl:       20px;
  --sh-text-2xl:      24px;
  --sh-text-3xl:      32px;
  --sh-text-4xl:      36px;
  --sh-text-5xl:      48px;

  /* ========= TRACKING ========= */
  --sh-track-tight:   -0.03em;
  --sh-track-snug:    -0.02em;
  --sh-track-none:    0;
  --sh-track-wide:    0.04em;

  /* ========= LINE-HEIGHTS ========= */
  --sh-leading-tight: 1.1;
  --sh-leading-snug:  1.2;
  --sh-leading-base:  1.5;

  /* ========= SPACING (4pt scale) ========= */
  --sh-space-xs:      4px;
  --sh-space-sm:      8px;
  --sh-space-md:      16px;
  --sh-space-lg:      24px;
  --sh-space-xl:      32px;
  --sh-space-2xl:     48px;
  --sh-space-3xl:     64px;

  /* ========= RADII ========= */
  --sh-r-xs:          4px;
  --sh-r-sm:          8px;
  --sh-r-md:          12px;
  --sh-r-lg:          16px;
  --sh-r-xl:          24px;
  --sh-r-2xl:         49px;
  --sh-r-full:        9999px;

  /* ========= MOTION ========= */
  --sh-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --sh-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --sh-dur-quick:     160ms;
  --sh-dur-base:      280ms;
  --sh-dur-slow:      560ms;

  /* ========= GRADIENTS ========= */
  --sh-sun-gradient:  linear-gradient(180deg, var(--sh-sun-bright) 0%, var(--sh-sun-warm) 100%);
}