/*
 * SmarterHarbor Design Tokens
 * Hosted at: https://assets.smarter-harbor.app/tokens.css
 *
 * HSL tuples (no hsl() wrapper) are provided alongside computed values so
 * Tailwind's alpha-value modifier — e.g. hsl(var(--sh-accent-hsl) / 0.5) —
 * works without any build-time processing.
 */

:root {
  /* ── Palette: dark navy / teal ─────────────────────────────────────────── */

  --sh-bg-hsl:             214 31% 12%;   /* #141c28 — page background       */
  --sh-surface-hsl:        212 33% 17%;   /* #1c2a3a — cards, modals         */
  --sh-surface-raised-hsl: 212 36% 21%;   /* #22334a — table headers         */
  --sh-border-hsl:         211 33% 26%;   /* #2c3f58 — borders               */

  --sh-text-hsl:           204 77% 95%;   /* #e8f4fc — primary text          */
  --sh-text-secondary-hsl: 205 32% 71%;   /* #9bb8cc — secondary text        */
  --sh-text-muted-hsl:     206 27% 55%;   /* #6b93b0 — muted text            */
  --sh-text-dim-hsl:       207 30% 34%;   /* #3d5a72 — very dim / placeholders */

  --sh-accent-hsl:         174 62% 51%;   /* #2dd4bf — teal primary action   */
  --sh-accent-hover-hsl:   173 80% 39%;   /* #14b8a4 — teal hover            */
  --sh-accent-bg-hsl:      178 61% 18%;   /* #134e4a — teal tinted surface   */

  --sh-danger-hsl:          0 91% 71%;   /* #f87171 — destructive            */
  --sh-danger-bg-hsl:       0 33% 13%;   /* #2d1515 — destructive surface    */

  --sh-warning-hsl:        44 97% 56%;   /* #fbbf24 — amber warning          */
  --sh-warning-bg-hsl:     26 95% 14%;   /* #422006 — amber surface          */

  --sh-info-hsl:          213 94% 67%;   /* #60a5fa — blue info              */
  --sh-info-bg-hsl:       214 50% 24%;   /* #1e3a5f — blue surface           */

  /* ── Computed values (for direct use in CSS) ─────────────────────────── */

  --sh-bg:             hsl(var(--sh-bg-hsl));
  --sh-surface:        hsl(var(--sh-surface-hsl));
  --sh-surface-raised: hsl(var(--sh-surface-raised-hsl));
  --sh-border:         hsl(var(--sh-border-hsl));

  --sh-text:           hsl(var(--sh-text-hsl));
  --sh-text-secondary: hsl(var(--sh-text-secondary-hsl));
  --sh-text-muted:     hsl(var(--sh-text-muted-hsl));
  --sh-text-dim:       hsl(var(--sh-text-dim-hsl));

  --sh-accent:         hsl(var(--sh-accent-hsl));
  --sh-accent-hover:   hsl(var(--sh-accent-hover-hsl));
  --sh-accent-bg:      hsl(var(--sh-accent-bg-hsl));

  --sh-danger:         hsl(var(--sh-danger-hsl));
  --sh-danger-bg:      hsl(var(--sh-danger-bg-hsl));

  --sh-warning:        hsl(var(--sh-warning-hsl));
  --sh-warning-bg:     hsl(var(--sh-warning-bg-hsl));

  --sh-info:           hsl(var(--sh-info-hsl));
  --sh-info-bg:        hsl(var(--sh-info-bg-hsl));

  /* ── Logo accent (gold — used in the boat icon mark) ─────────────────── */
  --sh-logo-accent-hsl: 44 97% 54%;
  --sh-logo-accent:     hsl(var(--sh-logo-accent-hsl));

  /* ── Typography ──────────────────────────────────────────────────────── */
  --sh-font-sans: system-ui, -apple-system, sans-serif;
  --sh-font-mono: ui-monospace, 'Fira Code', monospace;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --sh-radius-sm: 0.25rem;
  --sh-radius:    0.375rem;
  --sh-radius-lg: 0.5rem;
  --sh-radius-xl: 0.75rem;
}