/* ── Skipd design tokens ────────────────────────────────────
   Source of truth for all color, type, spacing, and motion values.
   Use semantic aliases in components; raw palette vars in tokens only.
   ─────────────────────────────────────────────────────────── */
:root {
    /* ── Brand green (savings / positive) ── */
    --green-700: #15803d;
    --green-600: #16a34a;
    --green-100: #d1fae5;
    --green-50:  #f0fdf4;

    /* ── Neutral gray scale ── */
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50:  #f9fafb;
    --white:    #ffffff;

    /* ── Semantic red (destructive only) ── */
    --red-700: #991b1b;
    --red-600: #dc2626;
    --red-500: #ef4444;
    --red-200: #fecaca;
    --red-50:  #fef2f2;

    /* ── Ink (toast / overlay surfaces) ── */
    --ink-800: #1f2937;

    /* ── Color semantic aliases ── */
    --color-primary:        var(--green-600);
    --color-primary-hover:  var(--green-700);
    --color-primary-soft:   var(--green-50);
    --color-primary-mint:   var(--green-100);

    --text-strong:    var(--gray-900);
    --text-body:      var(--gray-700);
    --text-muted:     var(--gray-500);
    --text-subtle:    var(--gray-400);
    --text-on-accent: var(--white);
    --text-amount:    var(--green-600);

    --surface-page:   var(--gray-100);
    --surface-card:   var(--white);
    --surface-inset:  var(--gray-50);
    --surface-hover:  var(--gray-50);
    --surface-toast:  var(--ink-800);

    --border-default: var(--gray-200);
    --border-strong:  var(--gray-400);
    --border-focus:   var(--green-600);
    --divider:        var(--gray-100);

    --danger:         var(--red-500);
    --danger-hover:   var(--red-600);
    --danger-soft:    var(--red-50);
    --danger-text:    var(--red-600);

    /* ── Typography ── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
                 'Helvetica Neue', Arial, sans-serif;

    --text-2xs:     0.7rem;
    --text-xs:      0.75rem;
    --text-sm:      0.85rem;
    --text-base:    0.9rem;
    --text-md:      0.95rem;
    --text-lg:      1rem;
    --text-xl:      1.4rem;
    --text-display: clamp(2.5rem, 10vw, 3.5rem);

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:  1;
    --leading-snug:   1.2;
    --leading-normal: 1.5;

    --tracking-display: -0.02em;
    --tracking-heading: -0.01em;
    --tracking-eyebrow:  0.05em;

    /* ── Spacing ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;

    /* ── Radii ── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   9px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-pill: 100px;

    /* ── Borders ── */
    --border-thin: 1px;
    --border-mid:  1.5px;

    /* ── Shadows — flat system; toast is the one exception ── */
    --shadow-none:  none;
    --shadow-toast: 0 4px 16px rgba(17, 24, 39, 0.18);

    /* ── Layout ── */
    --app-max-width: 520px;

    /* ── Motion ── */
    --ease-ui:       0.12s;
    --duration-toast: 0.2s;
}