/* ──────────────────────────────────────────────────────────────
   Cadence — Design Tokens
   Native iOS habit tracker. Warm cream paper + soft cobalt accent.
   Sourced from HabitTracker/DesignSystem/AppTheme.swift.
   ────────────────────────────────────────────────────────────── */

/* Web font substitutions for the iOS native fonts.
   Original: Iowan Old Style (display serif) + Avenir Next (sans).
   Substitutes loaded here:  Lora             +  Nunito Sans      */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:opsz,wght@6..12,300..900&display=swap");

:root {
  /* ───────── Color — Surfaces & paper ───────── */
  --paper:            #F5F2EA;   /* app background, warm cream */
  --paper-warm-hi:    #F2EBDB;   /* topLeft of bg gradient    */
  --paper-warm-lo:    #E8DFCC;   /* bottomRight of bg gradient */
  --surface:          #FAFAF7;   /* secondary surface         */
  --surface-strong:   #FFFFFF;   /* cards                     */
  --field:            #FFFFFFEB; /* input fill                */
  --border:           #DED7C7;   /* hairline on every card    */
  --border-quiet:     #E8E4D9;   /* non-due day cell stroke   */
  --shadow-rgb:       36, 41, 46;     /* base shadow color RGB */
  --shadow-card:      0 10px 20px rgba(36, 41, 46, 0.08);
  --shadow-lift:      0 14px 28px rgba(74, 107, 247, 0.22); /* accent lift on primary CTA */

  /* ───────── Color — Text ───────── */
  --fg:               #1F2938;   /* primary copy        */
  --fg-muted:         #5E6B7A;   /* secondary copy      */
  --fg-on-accent:     #FFFFFF;
  --fg-on-dark:       #FFFFFF;

  /* ───────── Color — Accent + semantic ───────── */
  --accent:           #4A6BF7;   /* cobalt, brand action */
  --accent-soft:      #EDF1FF;   /* tinted accent fill   */
  --accent-press:     #3A57D4;
  --success:          #2D8F6B;
  --success-soft:     #E8F4ED;
  --warning:          #D78229;
  --warning-soft:     #FFF5E8;
  --error:            #B5544A;
  --error-soft:       #FAEDE9;

  /* ───────── Color — Habit palette (6 swatches) ───────── */
  --habit-coral:      #EB6B57;
  --habit-gold:       #E0A82E;
  --habit-teal:       #2E948F;
  --habit-slate:      #424F63;
  --habit-moss:       #59803F;
  --habit-rose:       #C25E7D;

  /* ───────── Type — Families ───────── */
  --font-serif:       "Lora", "Iowan Old Style", "Charter", "Georgia", serif;
  --font-sans:        "Nunito Sans", "Avenir Next", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  /* ───────── Type — Base scale (matches SwiftUI sizes) ───────── */
  --t-display:        clamp(28px, 4.5vw, 40px);   /* hero — onboarding */
  --t-h1:             34px;                       /* screen title      */
  --t-h2:             30px;                       /* habit preview     */
  --t-h3:             24px;                       /* period header     */
  --t-h4:             22px;                       /* card title        */
  --t-h5:             18px;                       /* habit card head   */
  --t-stat:           28px;                       /* big numeric       */
  --t-body:           15px;
  --t-body-sm:        14px;
  --t-meta:           13px;
  --t-caption:        12px;
  --t-eyebrow:        11px;                       /* tracked + caps    */

  /* ───────── Type — Weights ───────── */
  --w-regular:        400;
  --w-medium:         500;
  --w-semibold:       600;
  --w-bold:           700;

  /* ───────── Spacing — 4pt grid, top-aligned values from AppTheme ───────── */
  --s-1:  4px;
  --s-2:  6px;    /* fine inter-item                  */
  --s-3:  8px;
  --s-4:  10px;   /* horizontal stat-card gap         */
  --s-5:  12px;
  --s-6:  14px;
  --s-7:  16px;   /* card inner padding (default)     */
  --s-8:  18px;
  --s-9:  20px;   /* screen gutter                    */
  --s-10: 24px;
  --s-12: 28px;
  --s-14: 32px;

  /* ───────── Radius — continuous corners ───────── */
  --r-input:    14px;
  --r-cell:     7px;
  --r-tile:     16px;
  --r-button:   18px;
  --r-card:     22px;
  --r-card-lg:  26px;
  --r-pill:     999px;

  /* ───────── Easing & motion ───────── */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:      0.18s;
  --t-medium:    0.28s;
}

/* ────────── Semantic helpers ────────── */
.t-display   { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-display); color: var(--fg); letter-spacing: -0.01em; text-wrap: pretty; }
.t-h1        { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h1);  color: var(--fg); letter-spacing: -0.005em; }
.t-h2        { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h2);  color: var(--fg); }
.t-h3        { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h3);  color: var(--fg); }
.t-h4        { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h4);  color: var(--fg); }
.t-h5        { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h5);  color: var(--fg); }
.t-stat      { font-family: var(--font-sans);  font-weight: 500; font-size: var(--t-stat); color: var(--fg); letter-spacing: -0.01em; }
.t-body      { font-family: var(--font-sans);  font-weight: 500; font-size: var(--t-body); color: var(--fg); }
.t-body-sm   { font-family: var(--font-sans);  font-weight: 400; font-size: var(--t-body-sm); color: var(--fg-muted); line-height: 1.45; }
.t-meta      { font-family: var(--font-sans);  font-weight: 500; font-size: var(--t-meta); color: var(--fg-muted); }
.t-caption   { font-family: var(--font-sans);  font-weight: 400; font-size: var(--t-caption); color: var(--fg-muted); }
.t-eyebrow   {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--t-eyebrow); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.09em;
}

/* ────────── Card surface (the workhorse) ────────── */
.card {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-7);
}
.card--surface  { background: var(--surface); }
.card--lg       { border-radius: var(--r-card-lg); padding: var(--s-9); }

/* ────────── Buttons ────────── */
.btn-primary {
  font-family: var(--font-sans); font-weight: 600; font-size: 17px;
  color: var(--fg-on-accent); background: var(--accent);
  border: 0; border-radius: var(--r-button);
  padding: 16px 20px;
  box-shadow: var(--shadow-lift);
  transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
  cursor: pointer;
}
.btn-primary:hover  { background: var(--accent-press); }
.btn-primary:active { transform: scale(0.985); }
.btn-primary[disabled],
.btn-primary.is-disabled { background: color-mix(in oklab, var(--accent) 45%, transparent); box-shadow: none; cursor: not-allowed; }

.btn-ghost {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  color: var(--fg); background: var(--surface-strong);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 10px 16px;
  transition: background var(--t-fast) var(--ease-soft);
  cursor: pointer;
}
.btn-ghost:hover  { background: color-mix(in oklab, var(--surface-strong) 92%, var(--fg)); }

/* ────────── Input ────────── */
.input {
  font-family: var(--font-sans); font-weight: 500; font-size: 17px;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--border); border-radius: var(--r-input);
  padding: 14px;
  width: 100%; box-sizing: border-box;
}
.input:focus { outline: none; border-color: var(--accent); }

/* ────────── Pill / capsule ────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
}

/* ────────── App background (the warm gradient with cobalt orb) ────────── */
.app-bg {
  background:
    radial-gradient(circle at 88% -10%, rgba(74,107,247,0.18) 0, transparent 32%),
    linear-gradient(135deg, var(--paper-warm-hi) 0%, var(--paper) 50%, var(--paper-warm-lo) 100%);
}