/* ============================================================
 * Kaya design tokens
 * ------------------------------------------------------------
 * Single source of truth for color, type, space, radius,
 * shadow, and motion. Imported at the top of style.css.
 *
 * When adding a new token: also add a one-line entry to
 * docs/design/system.md so designers (human or AI) can find it.
 *
 * Brand vocabulary (do not rename — these are the words we use
 * when discussing the look): Pandan Green, Toast Gold, Yolk
 * Orange, Coconut Cream, Dark Brown, Warm Brown.
 * ============================================================ */

:root {
  /* ── Brand palette ── */
  --green:       #4CAF50;   /* Pandan Green  */
  --green-dark:  #388E3C;   /* Pandan dark (text on light, hover) */
  --green-mid:   #4CAF50;   /* alias — same as --green */
  --green-light: #F1F8E9;   /* tint for backgrounds */
  --accent:      #FFC107;   /* Toast Gold    */
  --accent-dark: #FF9800;   /* Yolk Orange   */
  --accent-light:#FFF5CC;   /* pale butter — warm tint for surfaces (mirrors --green-light) */
  --text:        #3E2723;   /* Dark Brown    */
  --sub:         #6D4C41;   /* Warm Brown — secondary copy (was Soft Blue-Grey #78909C; refreshed 2026-05-03 with B-040a per Claude Design handoff) */
  --border:      #E8DBC0;   /* warmer cream border (was #EDE7D4) */
  --bg:          #FAF6E8;   /* deeper Coconut Cream (was #FFF8E1) */
  --card:        #FFFFFF;
  --red:         #EF4444;
  --red-light:   #FEF2F2;
  --warn:        #FF9800;   /* Yolk Orange for warnings */

  /* ── Semantic status aliases ──
     Feedback colors for success / error states. Point status text and
     badges at these so the two states stay consistent app-wide instead of
     re-inventing greens and reds inline. NOTE: --error was referenced via
     var(--error) in several inline styles but never defined — those uses
     were silently undefined (e.g. the recurring-alert badge lost its red
     background). Defining it here repairs them. */
  --success:     var(--green-dark);
  --error:       var(--red);

  /* ── Gradients ──
     Toast-butter hero slab at the top of every tab (Home, Add, History,
     Wealth, Settings). Dark-brown ink (--text) reads on top of it. */
  --gradient-hero: linear-gradient(180deg, #FFE08A 0%, #FFD76A 100%);

  /* ── Layout ── */
  --nav-h:       64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-max-w:   430px;     /* iPhone 14/15/16 Pro logical width */

  /* ── Spacing scale (4-pt rhythm) ──
     Use for new components. Legacy CSS still has literals; do not
     migrate wholesale — flagged by /design-review only on new code. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Radii ── */
  --radius-sm:   8px;       /* small chips, badges */
  --radius-md:   12px;      /* buttons, form fields */
  --radius-lg:   16px;      /* section cards */
  --radius-xl:   20px;      /* modal sheet top, period-chip pill */
  --radius-pill: 999px;     /* fully rounded */

  /* ── Shadows ──
     Kaya's surfaces are light-on-light, so shadows are subtle.
     If you need a stronger elevation, add a new token here, do
     not introduce a literal at the call site. */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  /* Brown-tinted card shadow — warmer than the neutral --shadow-sm.
     Use on day-group cards and any new card surfaces; legacy
     .section-card still uses the neutral shadow. */
  --shadow-card: 0 1px 2px rgba(62, 39, 35, 0.06), 0 4px 12px rgba(62, 39, 35, 0.04);

  /* ── Motion ──
     Default to --duration-fast for affordances (tap, focus) and
     --duration-base for layout changes (modal slide-in). */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Swipe action tokens (shared between expense rows and wealth rows) ──
     Width: 72px — thumb-comfortable, snaps against the iOS 70pt convention.
     Stack: icon 17px + label 0.68rem, gap 3px, vertically centered.
     Palette: reserved red / amber / green-dark / neutral. Green (var(--green))
     is deliberately NOT used here — kept exclusive to primary CTAs. */
  --swipe-btn-w:        72px;
  --swipe-icon-size:    17px;
  --swipe-label-size:   0.68rem;
  --swipe-label-weight: 600;
  --swipe-gap:          3px;
  --swipe-radius:       0;
  --swipe-color-danger: #DC2626;
  --swipe-color-warn:   #F59E0B;
  --swipe-color-ok:     #15803D;
  --swipe-color-neutral:#F1E9CF;
  --swipe-ink-on-dark:  #FFFFFF;
  --swipe-ink-on-light: var(--text);
}