/**
 * Deliney — Colors & Typography
 * Design system: Warm & Tactile
 * Source of truth: app/lib/shared/theme/ + uploads/tokens.css
 *
 * Usage: <link rel="stylesheet" href="colors_and_type.css">
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ─── Light Mode (default) ──────────────────────────────────────── */
:root {

  /* ── Surfaces ── */
  --bg:             #F6F1EA;   /* Warm parchment — page background */
  --surface:        #FFFBF5;   /* Off-white cream — cards, sheets  */
  --surface-alt:    #EFE7DB;   /* Warm tan — inputs, alt rows      */

  /* ── Ink ── */
  --ink:            #1F1A14;   /* Deep walnut — primary text       */
  --ink-soft:       #6B6054;   /* Umber — secondary text           */
  --ink-mute:       #9A8E7E;   /* Stone — captions, placeholders   */

  /* ── Dividers ── */
  --divider:        rgba(31, 26, 20, 0.08);
  --divider-strong: rgba(31, 26, 20, 0.14);

  /* ── Clay — Primary brand accent ── */
  --clay:           #B5613D;   /* Terracotta — CTAs, active states */
  --clay-soft:      #E9CDBF;   /* Pale terracotta — tints, chips   */

  /* ── Sage — Positive / income ── */
  --sage:           #6E8169;   /* Muted forest green               */
  --sage-soft:      #D4DCCD;   /* Pale sage — positive tints       */

  /* ── Semantic ── */
  --terra:          #9B3B2C;   /* Deep red — expense / error       */
  --mustard:        #C89A3C;   /* Warm gold — warnings / underspend*/
  --green:          #3D7A52;   /* Income category                  */
  --transfer:       #7A8FA8;   /* Slate — transfer transactions    */

  /* ── Aliases ── */
  --expense:        var(--terra);
  --income:         var(--sage);

  /* ── Typography ── */
  --font-serif:     "PT Serif", Georgia, serif;
  --font-sans:      Inter, -apple-system, system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-brand:     "PT Serif", Georgia, serif;  /* same as serif — wordmark */

  /* ── Radii ── */
  --r-sm:           8px;
  --r-md:           12px;
  --r-field:        14px;
  --r-card:         18px;
  --r-card-lg:      22px;   /* SurfaceCard default */
  --r-sheet:        28px;   /* bottom sheets */
  --r-pill:         999px;
  --r-circle:       50%;
  --r-bank:         28%;    /* bank monogram squircle */

  /* ── Spacing scale ── */
  --sp-1:  4px;   /* xs  */
  --sp-2:  8px;   /* sm  */
  --sp-3:  12px;  /* md  */
  --sp-4:  16px;  /* lg  */
  --sp-5:  20px;  /* xl  */
  --sp-6:  24px;  /* xxl */
  --sp-8:  32px;  /* xxxl*/

  /* ── Shadows ── */
  --shadow-card:    0 1px 3px rgba(31,26,20,0.06), 0 4px 12px rgba(31,26,20,0.06);
  --shadow-sheet:   0 -2px 24px rgba(31,26,20,0.10);
  --shadow-fab:     0 8px 20px rgba(181,97,61,0.33);   /* clay FAB */
}

/* ─── Category palette (DelineyPalette) ─────────────────────────── */
/* Shared, reusable accent colors for categories, labels & avatars.   */
/* 20-hue muted wheel — every screen (chips, transactions, charts,    */
/* budgets, account avatars) should reference these tokens, never     */
/* raw hex, so the palette stays consistent and theme-aware.          */
/* Soft tint convention: color-mix(in srgb, var(--cat-x) 14%, var(--surface)) */
:root {
  --cat-terra:    #9B3B2C;   /* 🏠 housing / rent      */
  --cat-coral:    #C26B5A;   /* 🍓 dining out / treats */
  --cat-clay:     #B5613D;   /* 🍽️ restaurants        */
  --cat-amber:    #C08641;   /* 🛍️ shopping            */
  --cat-mustard:  #C89A3C;   /* 💡 bills & utilities   */
  --cat-citron:   #9A9B47;   /* 🍋 fees / tax          */
  --cat-olive:    #7E9150;   /* 🥗 wellness / food     */
  --cat-fern:     #5E9457;   /* 💰 income / salary     */
  --cat-sage:     #6E8169;   /* 🛒 groceries           */
  --cat-teal:     #5F8A7B;   /* 💊 health              */
  --cat-lagoon:   #4F8B96;   /* 💧 water / utilities   */
  --cat-sky:      #5A85AB;   /* 🚌 transport / transit */
  --cat-slate:    #7A8FA8;   /* ✈️ travel / transfers  */
  --cat-indigo:   #6F76B2;   /* 🎮 gaming / tech       */
  --cat-violet:   #8A6CA8;   /* 🎬 streaming / media   */
  --cat-mauve:    #9E6BA0;   /* 🎭 entertainment       */
  --cat-plum:     #A8638A;   /* 🍇 personal            */
  --cat-rose:     #C78FAA;   /* 🍷 social / nightlife  */
  --cat-stone:    #A79C86;   /* 💼 work / business     */
  --cat-umber:    #6B6054;   /* 📦 misc / other        */
}

/* ─── Dark Mode ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #1A1612;
  --surface:        #231D18;
  --surface-alt:    #2E2620;

  --ink:            #F4ECE0;
  --ink-soft:       #B5A894;
  --ink-mute:       #7B6F5E;

  --divider:        rgba(244, 236, 224, 0.08);
  --divider-strong: rgba(244, 236, 224, 0.14);

  --clay:           #D48966;
  --clay-soft:      #4A2E1E;

  --sage:           #9BB396;
  --sage-soft:      #2E3A2B;

  --terra:          #D46B57;
  --mustard:        #E0B45F;
  --green:          #72AD88;

  /* Category palette — brightened for dark surfaces */
  --cat-terra:    #D46B57;
  --cat-coral:    #DA8A78;
  --cat-clay:     #D48966;
  --cat-amber:    #DBA567;
  --cat-mustard:  #E0B45F;
  --cat-citron:   #BFC06A;
  --cat-olive:    #A6B873;
  --cat-fern:     #84BC7C;
  --cat-sage:     #9BB396;
  --cat-teal:     #84B6A6;
  --cat-lagoon:   #74B4BF;
  --cat-sky:      #87AED2;
  --cat-slate:    #A2B4CC;
  --cat-indigo:   #9AA1D9;
  --cat-violet:   #B295CE;
  --cat-mauve:    #C593C6;
  --cat-plum:     #CE89B0;
  --cat-rose:     #E0AEC6;
  --cat-stone:    #C5BBA3;
  --cat-umber:    #9C8E7C;
}

/* ─── Semantic type tokens ─────────────────────────────────────── */
:root {
  /* Display (PT Serif) */
  --text-page-title:     32px;
  --text-greeting:       26px;
  --text-section-title:  22px;
  --text-budget-label:   19px;
  --text-date-header:    18px;
  --text-avatar-initial: 16px;

  /* Body (Inter) */
  --text-label:      15.5px;  /* item name, key row text — w600 */
  --text-body:       15px;
  --text-meta:       13px;    /* secondary metadata            */
  --text-caption:    12px;    /* dates, captions               */
  --text-micro:      11px;    /* uppercase labels              */
  --text-nano:       10px;    /* currency labels, chip text    */

  /* Mono (JetBrains Mono) */
  --text-amount-lg:  40px;    /* hero amounts — w400 PT Serif  */
  --text-amount-md:  28-36px; /* card amounts                  */
  --text-amount-sm:  14px;    /* list tile amounts — w600      */
  --text-amount-xs:  12px;    /* secondary amounts — w400      */
}

/* ─── Utility classes ───────────────────────────────────────────── */

/* Surfaces */
.bg          { background: var(--bg); }
.surface     { background: var(--surface); }
.surface-alt { background: var(--surface-alt); }

/* Ink */
.ink         { color: var(--ink); }
.ink-soft    { color: var(--ink-soft); }
.ink-mute    { color: var(--ink-mute); }

/* Accents */
.clay        { color: var(--clay); }
.sage        { color: var(--sage); }
.terra       { color: var(--terra); }
.mustard     { color: var(--mustard); }

/* Typography */
.serif       { font-family: var(--font-serif); }
.sans        { font-family: var(--font-sans); }
.mono        { font-family: var(--font-mono); }

/* Headings */
.page-title     { font-family: var(--font-serif); font-size: var(--text-page-title);    line-height: 1.1; }
.greeting       { font-family: var(--font-serif); font-size: var(--text-greeting);      line-height: 1.1; }
.section-title  { font-family: var(--font-serif); font-size: var(--text-section-title); line-height: 1.1; }
.budget-label   { font-family: var(--font-serif); font-size: var(--text-budget-label);  line-height: 1.1; }
.date-header    { font-family: var(--font-serif); font-size: var(--text-date-header); }

/* Body */
.label    { font-size: var(--text-label);   font-weight: 600; }
.meta     { font-size: var(--text-meta); }
.caption  { font-size: var(--text-caption); }
.micro    { font-size: var(--text-micro);   font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* Mono amounts */
.amount { font-family: var(--font-mono); font-weight: 600; }
.amount.expense { color: var(--terra); }
.amount.income  { color: var(--sage); }

/* SurfaceCard pattern */
.surface-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-card-lg);
  padding: 22px;
}
.surface-card.tight {
  border-radius: var(--r-card);
  padding: 0;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
}