/* ============================================================================
   Habeat — Colors & Type
   The web-facing port of the locked design contract in DESIGN_SYSTEM.md.
   Source of truth: lamcode9/habeat_app · Sources/Design/Tokens + Theme.

   FONT NOTE: the product ships Apple SF Pro Rounded (display + body) and
   SF Pro / SF Mono for numerics + code. SF Pro Rounded cannot be redistributed,
   so this system substitutes NUNITO (Google Fonts) — the nearest warm, rounded
   humanist — for HTML artifacts. On Apple devices the native rounded stack is
   preferred first. Flag to the user if exact-match fonts are required.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Nunito+Sans:wght@400;600&display=swap');

:root {
  /* ---- Type families -------------------------------------------------------
     `--font-rounded` = SF Pro Rounded substitute (display, body, the whole UI).
     `--font-numeric` = tabular figures for streak counters + stats.
     `--font-mono`    = code-shaped UI (sync state, CSV export labels). */
  --font-rounded: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system,
                  "Segoe UI", system-ui, sans-serif;
  --font-numeric: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system,
                  system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  /* ====================================================================
     SURFACE TOKENS — semantic neutrals (LIGHT mode, the default below).
     Warm-grey-leaning. Pure black + pure white are intentionally absent.
     ==================================================================== */
  --surface-base:    #FAF8F5;          /* root view background            */
  --surface-raised:  #FFFFFF;          /* card / sheet background         */
  --surface-sunken:  #F1EDE7;          /* pressed state, list dividers    */
  --surface-overlay: rgba(0,0,0,.04);  /* skim overlay on cards           */
  --surface-canvas:  #0E0E10;          /* dark gallery canvas (paint ground) */

  --ink-primary:   #16161A;            /* body + headline text            */
  --ink-secondary: #5A5A63;            /* subtitles, metadata             */
  --ink-tertiary:  #8E8E97;            /* disabled, faint hints           */

  --border-subtle: rgba(0,0,0,.06);    /* card edge, divider              */
  --border-strong: rgba(0,0,0,.16);    /* focused field, selection ring   */

  --status-success:  #5F8B6E;          /* streak milestones (muted)       */
  --status-warning:  #C49764;          /* soft warning                    */
  --status-critical: #B95C5C;          /* destructive confirm             */

  /* Brand accent paints — sampled from the painted brand mark, mixed into
     every painterly surface so the logo's multi-hue energy carries through. */
  --accent-teal:   #1A9490;
  --accent-pink:   #F23890;
  --accent-violet: #8538C7;
  --accent-orange: #FF6B35;
  --accent-blue:   #3B82F6;

  /* ====================================================================
     SPACING — single 4-point grid. Use the token, never the raw number.
     ==================================================================== */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-xxxl:48px;

  /* ---- Radius scale -------------------------------------------------- */
  --radius-sm: 8px;    /* badges, chips           */
  --radius-md: 14px;   /* buttons, fields         */
  --radius-lg: 20px;   /* cards, list rows        */
  --radius-xl: 28px;   /* sheets, modals          */
  --radius-pill: 999px;

  /* ---- Motion curves (spring-based, never linear) -------------------- */
  --motion-tap:    cubic-bezier(0.34, 1.4, 0.64, 1);   /* button press/release  */
  --motion-glide:  cubic-bezier(0.22, 0.9, 0.31, 1);   /* card move, sheet present */
  --motion-settle: cubic-bezier(0.2, 0.85, 0.25, 1);   /* theme pulse on check-off */
  --dur-tap: 180ms;
  --dur-glide: 420ms;
  --dur-settle: 660ms;
  --dur-fade: 180ms;   /* reduce-motion fallback duration */

  /* ---- Elevation (soft, diffuse — calm, never hard drop shadows) ----- */
  --shadow-card:  0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-sheet: 0 2px 8px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.12);
  --shadow-glow:  0 0 0 1.5px var(--theme-steady-start, rgba(0,0,0,.1)),
                  0 8px 28px rgba(0,0,0,.10);

  /* ====================================================================
     SEMANTIC TYPE ROLES — hierarchy through weight + space, not size alone.
     ==================================================================== */
  --type-display-size: 34px;  --type-display-weight: 800; --type-display-lh: 1.08;
  --type-headline-size: 22px; --type-headline-weight: 700; --type-headline-lh: 1.15;
  --type-subhead-size: 19px;  --type-subhead-weight: 600; --type-subhead-lh: 1.25;
  --type-body-size: 16px;     --type-body-weight: 400; --type-body-lh: 1.5;
  --type-callout-size: 15px;  --type-callout-weight: 600; --type-callout-lh: 1.3;
  --type-caption-size: 13px;  --type-caption-weight: 400; --type-caption-lh: 1.35;
  --type-numeric-size: 28px;  --type-numeric-weight: 700;
}

/* ============================================================================
   DARK MODE — the launch default. Light is the equally-polished alternative.
   Apply via [data-theme="dark"] on a wrapper, or it follows the OS.
   ============================================================================ */
[data-theme="dark"] {
  --surface-base:    #0E0E10;
  --surface-raised:  #18181B;
  --surface-sunken:  #08080A;
  --surface-overlay: rgba(255,255,255,.06);
  --surface-canvas:  #0E0E10;

  --ink-primary:   #F4F2EE;
  --ink-secondary: #A3A3AD;
  --ink-tertiary:  #6D6D75;

  --border-subtle: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.20);

  --status-success:  #88BFA0;
  --status-warning:  #E0B888;
  --status-critical: #E69191;

  --shadow-card:  0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --shadow-sheet: 0 2px 12px rgba(0,0,0,.5), 0 24px 80px rgba(0,0,0,.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-base:    #0E0E10;
    --surface-raised:  #18181B;
    --surface-sunken:  #08080A;
    --surface-overlay: rgba(255,255,255,.06);
    --surface-canvas:  #0E0E10;
    --ink-primary:   #F4F2EE;
    --ink-secondary: #A3A3AD;
    --ink-tertiary:  #6D6D75;
    --border-subtle: rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.20);
    --status-success:  #88BFA0;
    --status-warning:  #E0B888;
    --status-critical: #E69191;
    --shadow-card:  0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --shadow-sheet: 0 2px 12px rgba(0,0,0,.5), 0 24px 80px rgba(0,0,0,.7);
  }
}

/* ============================================================================
   VIBE THEMES — the only chromatic surface. Ten hand-tuned gradient families,
   each with 4 intensity stops mapped to streak depth:
     early (1–6d) · steady (7–29d) · deep (30–89d) · deepBloom (90+d)
   Each stop is a 2-color gradient (start → end). Values are the locked contract.
   Apply a theme by setting class="vibe-sunrise" (etc.) on any element; read the
   stops via the --vibe-* custom properties below.
   ============================================================================ */
.vibe-sunrise {
  --vibe-early:     linear-gradient(135deg, #FFD7A6, #FFB37A);
  --vibe-steady:    linear-gradient(135deg, #FF9E63, #E07650);
  --vibe-deep:      linear-gradient(135deg, #C9522D, #6E1F12);
  --vibe-deepbloom: linear-gradient(135deg, #A83A1F, #4A1208);
  --vibe-early-start: #FFD7A6; --vibe-steady-start: #FF9E63; --vibe-deep-start: #C9522D;
}
.vibe-forest {
  --vibe-early:     linear-gradient(135deg, #BFD8B5, #8FBE92);
  --vibe-steady:    linear-gradient(135deg, #5C9670, #3D6F52);
  --vibe-deep:      linear-gradient(135deg, #244D38, #0F2A1D);
  --vibe-deepbloom: linear-gradient(135deg, #183A26, #062014);
  --vibe-early-start: #BFD8B5; --vibe-steady-start: #5C9670; --vibe-deep-start: #244D38;
}
.vibe-ocean {
  --vibe-early:     linear-gradient(135deg, #B6D7E8, #7CB1CC);
  --vibe-steady:    linear-gradient(135deg, #4485A8, #2A5F80);
  --vibe-deep:      linear-gradient(135deg, #163E59, #051C2E);
  --vibe-deepbloom: linear-gradient(135deg, #0E2D45, #021425);
  --vibe-early-start: #B6D7E8; --vibe-steady-start: #4485A8; --vibe-deep-start: #163E59;
}
.vibe-ember {
  --vibe-early:     linear-gradient(135deg, #FFCFAA, #F89A77);
  --vibe-steady:    linear-gradient(135deg, #E6694B, #B83B26);
  --vibe-deep:      linear-gradient(135deg, #781F12, #2A0A05);
  --vibe-deepbloom: linear-gradient(135deg, #5C1408, #1C0603);
  --vibe-early-start: #FFCFAA; --vibe-steady-start: #E6694B; --vibe-deep-start: #781F12;
}
.vibe-lunar {
  --vibe-early:     linear-gradient(135deg, #D9D6DC, #9F9CAD);
  --vibe-steady:    linear-gradient(135deg, #6B6781, #443F58);
  --vibe-deep:      linear-gradient(135deg, #25223A, #0B0918);
  --vibe-deepbloom: linear-gradient(135deg, #1B1929, #06050F);
  --vibe-early-start: #D9D6DC; --vibe-steady-start: #6B6781; --vibe-deep-start: #25223A;
}
.vibe-bloom {
  --vibe-early:     linear-gradient(135deg, #F3C3D6, #D688AE);
  --vibe-steady:    linear-gradient(135deg, #B5588B, #813C66);
  --vibe-deep:      linear-gradient(135deg, #4C2240, #200E1C);
  --vibe-deepbloom: linear-gradient(135deg, #36172E, #150813);
  --vibe-early-start: #F3C3D6; --vibe-steady-start: #B5588B; --vibe-deep-start: #4C2240;
}
.vibe-galaxy {
  --vibe-early:     linear-gradient(135deg, #B4A8DD, #7B6CC1);
  --vibe-steady:    linear-gradient(135deg, #4D3D9C, #2E2071);
  --vibe-deep:      linear-gradient(135deg, #170F44, #060219);
  --vibe-deepbloom: linear-gradient(135deg, #0F0A30, #02010F);
  --vibe-early-start: #B4A8DD; --vibe-steady-start: #4D3D9C; --vibe-deep-start: #170F44;
}
.vibe-tide {
  --vibe-early:     linear-gradient(135deg, #A3DDD8, #6FC4BB);
  --vibe-steady:    linear-gradient(135deg, #3B8B85, #266D65);
  --vibe-deep:      linear-gradient(135deg, #134D48, #051D1A);
  --vibe-deepbloom: linear-gradient(135deg, #0C3835, #031412);
  --vibe-early-start: #A3DDD8; --vibe-steady-start: #3B8B85; --vibe-deep-start: #134D48;
}
.vibe-clay {
  --vibe-early:     linear-gradient(135deg, #E8C9B6, #D4B09D);
  --vibe-steady:    linear-gradient(135deg, #A17D68, #8B6852);
  --vibe-deep:      linear-gradient(135deg, #5C4640, #3D2F2A);
  --vibe-deepbloom: linear-gradient(135deg, #46342E, #2A1F1B);
  --vibe-early-start: #E8C9B6; --vibe-steady-start: #A17D68; --vibe-deep-start: #5C4640;
}
.vibe-heather {
  --vibe-early:     linear-gradient(135deg, #D5C8E5, #B8A8D6);
  --vibe-steady:    linear-gradient(135deg, #7A6B9E, #584B7A);
  --vibe-deep:      linear-gradient(135deg, #3B3250, #1F1835);
  --vibe-deepbloom: linear-gradient(135deg, #2A2339, #100A1F);
  --vibe-early-start: #D5C8E5; --vibe-steady-start: #7A6B9E; --vibe-deep-start: #3B3250;
}

/* ============================================================================
   BASE ELEMENT STYLES — opt in by wrapping content in .habeat
   ============================================================================ */
.habeat {
  font-family: var(--font-rounded);
  color: var(--ink-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.habeat h1, .h-display {
  font-size: var(--type-display-size); font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh); letter-spacing: -0.02em; margin: 0;
}
.habeat h2, .h-headline {
  font-size: var(--type-headline-size); font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-lh); letter-spacing: -0.01em; margin: 0;
}
.habeat h3, .h-subhead {
  font-size: var(--type-subhead-size); font-weight: var(--type-subhead-weight);
  line-height: var(--type-subhead-lh); margin: 0;
}
.habeat p, .h-body {
  font-size: var(--type-body-size); font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh); margin: 0; text-wrap: pretty;
}
.h-callout {
  font-size: var(--type-callout-size); font-weight: var(--type-callout-weight);
  line-height: var(--type-callout-lh);
}
.h-caption {
  font-size: var(--type-caption-size); font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh); color: var(--ink-secondary);
}
.h-numeric {
  font-family: var(--font-numeric); font-size: var(--type-numeric-size);
  font-weight: var(--type-numeric-weight); font-variant-numeric: tabular-nums;
}
.h-mono { font-family: var(--font-mono); }
/* Italic supporting line — the identity/cue voice (e.g. "becoming someone who reads"). */
.h-vow { font-style: italic; color: var(--ink-secondary); }

@media (prefers-reduced-motion: reduce) {
  .habeat *, .habeat *::before, .habeat *::after {
    animation-duration: var(--dur-fade) !important;
    transition-duration: var(--dur-fade) !important;
  }
}