/* =====================================================================
   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:      #FFF8EC;
  --happy-primary: #F4A435;
  --happy-accent:  #F9C870;
  --happy-text:    #3D2800;

  /* Neutral (streak 1–2 days or new user — default register) */
  --neutral-bg:      #F5F4F2;
  --neutral-primary: #7C7063;
  --neutral-accent:  #C4B8AC;
  --neutral-text:    #2C2520;

  /* Sad (streak = 0 or missed yesterday) */
  --sad-bg:      #F0EEF6;
  --sad-primary: #7B6FAF;
  --sad-accent:  #B8ADE0;
  --sad-text:    #1D1830;

  /* --- Semantic Overlays (mood-invariant) --- */
  --error:         #E05252;
  --success:       #43A97A;
  --info:          #5B9BD5;
  --pro-gold:      #D4AF37;
  --streak-active: #FF6B2B;
  --streak-broken: #9B9B99;
  --rank-gold:     #D4AF37;
  --rank-silver:   #A8A8A9;
  --rank-bronze:   #CD7F32;

  /* --- Typography Scale --- */
  --font-primary: 'Nunito', 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:   var(--neutral-primary);
  --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-secondary:     #EAE7E3;
  --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-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-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;
}

body[data-mood="happy"] { background-color: var(--happy-bg); color: var(--happy-text); }
body[data-mood="sad"]   { background-color: var(--sad-bg);   color: var(--sad-text); }

.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;
}