/* =====================================================================
   Habit Cats Design System — "Warm & Sharp"
   Base: CSS reset + design tokens + global styles
   ===================================================================== */

/* === Minimal Modern CSS Reset === */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* === Design Tokens & CSS Variables === */

:root {
  /* --- CSS Utility Variables (sizing, typography, etc.) --- */

  /* Sizing scale */
  --size-0_5:  0.125rem;  /*  2px */
  --size-1:    0.25rem;   /*  4px */
  --size-1_5:  0.375rem;  /*  6px */
  --size-2:    0.5rem;    /*  8px */
  --size-3:    0.75rem;   /* 12px */
  --size-4:    1rem;      /* 16px */
  --size-5:    1.25rem;   /* 20px */
  --size-6:    1.5rem;    /* 24px */
  --size-8:    2rem;      /* 32px */
  --size-10:   2.5rem;    /* 40px */
  --size-11:   2.75rem;   /* 44px */
  --size-16:   4rem;      /* 64px */
  --size-full: 100%;

  /* Layout */
  --max-i-3xs: 14rem;   /* ~224px, sidebar width */
  --border:    1px;

  /* Text size utilities */
  --text-xs:         0.75rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-fluid-base: clamp(0.875rem, 1.5vw, 1rem);

  /* Font weight utilities */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Border radius utilities */
  --rounded-sm:   0.25rem;
  --rounded-md:   0.375rem;
  --rounded-lg:   0.5rem;
  --rounded-full: 9999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Miscellaneous utilities */
  --opacity-50:   0.5;
  --time-200:     200ms;
  --rotate-90:    rotate(90deg);
  --leading-none: 1;

  /* --- Habit Cats Mood Registers --- */

  /* Happy (streak ≥ 3 consecutive days) */
  --happy-bg:      #F8EEDF;  /* softened parchment tint */
  --happy-primary: #ff595b;  /* race-day red — pure action, 4.7:1 on white ✓ */
  --happy-accent:  #F2A30F;  /* vivid amber — celebration rings, highlights */
  --happy-text:    #3D2800;

  /* Neutral (streak 1–2 days or new user — default register) */
  --neutral-bg:      #F7EFE2;  /* calmer warm sand */
  --neutral-primary: #FFCA4E;  /* action amber — NOTE: requires dark CTA text, see --color-primary-fg */
  --neutral-accent:  #B8815A;  /* softened terracotta borders */
  --neutral-text:    #2C2520;

  /* Sad (streak = 0 or missed yesterday) */
  --sad-bg:      #F2EEF8;  /* muted lavender for readability */
  --sad-primary: #7E49F2;  /* electric sport-violet, 5.0:1 on white ✓ */
  --sad-accent:  #D64ED9;  /* vivid magenta — energetic borders, not passive */
  --sad-text:    #1D1830;

  /* --- Semantic Overlays (mood-invariant) --- */
  --error:         #E05252;
  --success:       #43A97A;
  --info:          #5B9BD5;
  --pro-gold:      #F2A30F;  /* saturated amber-gold — podium, premium badge */
  --streak-active: #ff595b;  /* matches --happy-primary — the streak is the action */
  --streak-broken: #9B9B99;
  --rank-gold:     #F2A30F;
  --rank-silver:   #A8A8A9;
  --rank-bronze:   #CD7F32;

  /* --- Typography Scale --- */
  --font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-display:    2.25rem;   /* 36px — streak hero, milestone count */
  --text-rank:       2rem;      /* 32px — leaderboard rank position */
  --text-heading:    1.5rem;    /* 24px — page titles, group names */
  --text-subheading: 1.125rem;  /* 18px — section headers */
  --text-body:       1rem;      /* 16px — body copy */
  --text-label:      0.875rem;  /* 14px — labels, badges, CTAs */
  --text-caption:    0.75rem;   /* 12px — timestamps, metadata */

  /* --- Spacing Scale --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;

  /* --- Border Radius --- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* --- Semantic Color Mappings (component compatibility layer) --- */
  --color-bg:            var(--neutral-bg);
  --color-surface:       #FFFFFF;
  --color-text:          var(--neutral-text);
  --color-text-reversed: #FFFFFF;
  --color-text-subtle:   #6E6258;
  --color-link:          var(--info);
  --color-border-light:  #EAE7E3;
  --color-border:        var(--neutral-accent);
  --color-border-dark:   #9B9089;
  --color-selected:      var(--happy-accent);
  --color-selected-dark: var(--happy-primary);
  --color-highlight:     var(--happy-accent);
  --color-primary:       var(--neutral-primary);
  --color-primary-fg:    var(--happy-text);    /* dark text on amber CTAs; overridden to white in happy/sad */
  --color-secondary:     #EEE7DD;
  --color-negative:      var(--error);
  --color-positive:      var(--success);
}

/* Mood theming — <body data-mood="..."> rendered server-side */
body[data-mood="happy"] {
  --color-bg:            var(--happy-bg);
  --color-text:          var(--happy-text);
  --color-primary:       var(--happy-primary);
  --color-primary-fg:    #FFFFFF;  /* white text on red CTA */
  --color-border:        var(--happy-accent);
  --color-selected-dark: var(--happy-primary);
}

body[data-mood="sad"] {
  --color-bg:            var(--sad-bg);
  --color-text:          var(--sad-text);
  --color-primary:       var(--sad-primary);
  --color-primary-fg:    #FFFFFF;  /* white text on violet CTA */
  --color-border:        var(--sad-accent);
  --color-selected-dark: var(--sad-primary);
}

/* === Global Base Styles === */

* {
  border-color: var(--color-border);
  scrollbar-color: var(--neutral-accent) transparent;
  scrollbar-width: thin;
}

body {
  background-color: var(--neutral-bg);
  color: var(--neutral-text);
  font-family: var(--font-primary);
  font-synthesis-weight: none;
  line-height: 1.6;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  transition: background-color 400ms ease;
}

/* Keep page backgrounds mostly neutral and let mood live in accents/CTAs. */
body[data-mood="happy"],
body[data-mood="sad"] {
  background-color: var(--neutral-bg);
}

h1,
h2,
h3,
.app-name,
.page-title {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

turbo-cable-stream-source {
  display: none;
}

.turbo-progress-bar {
  background-color: var(--happy-primary);
}

::selection {
  background-color: var(--happy-accent);
  color: var(--happy-text);
}

.app-name {
  font-size: var(--text-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

.sr-only {
  block-size: 1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.user-avatar {
  align-items: center;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-primary-fg);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  height: var(--size-10);
  justify-content: center;
  line-height: 1;
  width: var(--size-10);
}

.user-avatar span {
  display: block;
}

.user-avatar__small {
  font-size: var(--text-xs);
  height: var(--size-8);
  width: var(--size-8);
}

.user-avatar__medium {
  font-size: var(--text-sm);
  height: var(--size-10);
  width: var(--size-10);
}

.user-avatar__large {
  font-size: var(--text-base);
  height: var(--size-16);
  width: var(--size-16);
}

/* Hidden stuff */
canvas[hidden],
img[hidden],
video[hidden],
picture[hidden],
div[hidden],
span[hidden] {
  display: none;
}