/* ============================================================================
   MONEYBOM — Colors & Typography
   ----------------------------------------------------------------------------
   Canonical CSS vars extracted from src/shared/design-system/tokens/ in the
   moneybom-mobile (Expo) codebase. Use these for every web/HTML artifact so
   fidelity with the real app is automatic.
   ============================================================================ */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
/* Pretendard = UI body & headings (local OTFs). Outfit = wordmark ONLY. */
@font-face { font-family: 'Pretendard'; font-weight: 100; font-style: normal; font-display: swap; src: url('fonts/Pretendard-Thin.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/Pretendard-ExtraLight.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Pretendard-Light.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Pretendard-Regular.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Pretendard-Medium.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Pretendard-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Pretendard-Bold.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Pretendard-ExtraBold.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Pretendard-Black.otf') format('opentype'); }
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");

:root {
  /* ── Base (light) ───────────────────────────────────────────────── */
  --c-background:   #FFFFFF;
  --c-surface:      #F4F4F4;   /* page bg when cards float on it */
  --c-foreground:   #111111;   /* ink black — text, filled buttons */
  --c-muted:        #888888;   /* secondary text, icons */
  --c-placeholder:  #BBBBBB;   /* tertiary, amount "/ total", paused */
  --c-border:       #E8E8E8;   /* hairlines, progress track fallback */

  /* ── Point color — Cream CTA (NEVER as text fg) ──────────────────── */
  --c-accent:       #F4EAD5;   /* CTA bg only — too light for text */
  --c-accent-hover: #EDD9B8;   /* CTA bg track (gauge unfilled) */
  --c-accent-text:  #7A6640;   /* only usable on cream bg */
  --c-accent-bg:    #FAF3E8;   /* soft cream tint for empty-state cards */

  /* ── Secondary accents ──────────────────────────────────────────── */
  --c-rose:         #C8B8B8;   /* dusty rose — fixed-expense type color */
  --c-rose-bg:      #F0ECEC;
  --c-steel:        #9FB8CE;   /* steel blue — daily-spend type color */

  /* ── Semantic ───────────────────────────────────────────────────── */
  --c-positive:     #3B8A4E;   /* income, paid, achieved */
  --c-negative:     #C0392B;   /* over-budget, error, warning */

  /* ── Gauge gradient (home hero arc) ─────────────────────────────── */
  --gauge-stop-1:   #8AADD4;   /* muted steel blue */
  --gauge-stop-2:   #62BAB0;   /* teal */
  --gauge-stop-3:   #C8A84C;   /* warm amber gold */

  /* ── Pocket accent palettes (up to 8 per type) ──────────────────── */
  --daily-1: #8AAECC; --daily-2: #7AC8BC; --daily-3: #9A90C8; --daily-4: #A0C8A4;
  --daily-5: #6BA3D6; --daily-6: #5CC4B0; --daily-7: #8B80D4; --daily-8: #88BFD8;
  --fixed-1: #C8948A; --fixed-2: #C8BC7A; --fixed-3: #B08AC8; --fixed-4: #C8A880;
  --fixed-5: #D4877E; --fixed-6: #D4C86A; --fixed-7: #C07AD4; --fixed-8: #D4B490;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-sans:    'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-display: 'Outfit',var(--font-sans);

  /* Size scale (px) — NEVER hardcode, always use these */
  --fs-xs:   12px;  /* badges, caption-2 */
  --fs-sm:   14px;  /* caption, meta, chips */
  --fs-md:   16px;  /* body, tab labels, buttons-sm */
  --fs-lg:   18px;  /* body-lg, hero-in-card */
  --fs-xl:   20px;  /* subsection title */
  --fs-xxl:  24px;  /* page title */
  --fs-xxxl: 42px;  /* hero amount (dashboard) */

  /* Line heights */
  --lh-tight:   20px;
  --lh-normal:  26px;
  --lh-relaxed: 28px;
  --lh-loose:   34px;
  --lh-hero:    60px;

  /* Weights — Pretendard */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ── Spacing (px) ───────────────────────────────────────────────── */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  20px;
  --sp-xxl: 24px;   /* screen H-padding */
  --sp-xxxl:32px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --r-sm:   8px;    /* badges, chips */
  --r-md:  12px;    /* inputs, small buttons */
  --r-lg:  14px;    /* pocket cards, default card */
  --r-xl:  16px;    /* primary buttons, bottom sheets */
  --r-2xl: 20px;    /* pinned pocket card */
  --r-3xl: 24px;    /* hero gauge card */
  --r-full: 9999px; /* pills, circles, FAB */

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-card:  0 4px 14px rgba(17, 17, 17, 0.055);
  --shadow-soft:  0 1px 6px rgba(0, 0, 0, 0.05);
  --shadow-gauge: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-sheet: 0 -4px 16px rgba(0, 0, 0, 0.08);
  --shadow-fab:   0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-toast: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Dark mode · opt-in via .dark class (never automatic) ─────────── */
:root { color-scheme: light; }
.dark {
    --c-background:  #111111;
    --c-surface:     #1C1C1C;
    --c-foreground:  #FFFFFF;
    --c-muted:       #888888;
    --c-placeholder: #444444;
    --c-border:      #2A2A2A;

    --c-accent:      #F4EAD5;
    --c-accent-hover:#EDD9B8;
    --c-accent-text: #7A6640;
    --c-accent-bg:   #2C2010;

    --c-rose:        #8A7070;
    --c-rose-bg:     #2A1818;
    --c-steel:       #5A7A9A;

    --c-positive:    #4CAF65;
    --c-negative:    #E05040;

    --shadow-card:  0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-soft:  0 1px 6px rgba(0, 0, 0, 0.25);
}

/* ============================================================================
   Semantic typography (class helpers) — map to Text.tsx variants
   ============================================================================ */
.t-hero         { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-xxxl); line-height: var(--lh-hero);    color: var(--c-foreground); letter-spacing: -1.5px; }
.t-title        { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-xxl);  line-height: var(--lh-loose);   color: var(--c-foreground); letter-spacing: -0.5px; }
.t-section      { font-family: var(--font-sans); font-weight: var(--fw-bold);      font-size: var(--fs-md);   line-height: var(--lh-relaxed); color: var(--c-foreground); letter-spacing: -0.2px; }
.t-body         { font-family: var(--font-sans); font-weight: var(--fw-regular);   font-size: var(--fs-md);   line-height: var(--lh-normal);  color: var(--c-foreground); }
.t-body-bold    { font-family: var(--font-sans); font-weight: var(--fw-semibold);  font-size: var(--fs-md);   line-height: var(--lh-relaxed); color: var(--c-foreground); }
.t-caption      { font-family: var(--font-sans); font-weight: var(--fw-regular);   font-size: var(--fs-sm);   line-height: var(--lh-tight);   color: var(--c-muted); }
.t-label        { font-family: var(--font-sans); font-weight: var(--fw-semibold);  font-size: var(--fs-xs);   line-height: var(--lh-tight);   color: var(--c-muted); text-transform: uppercase; letter-spacing: 1.2px; }
.t-logo         { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: var(--lh-relaxed); color: var(--c-foreground); letter-spacing: -0.5px; }

/* Additional utilities actually used in the app */
.t-mono-amount  { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; letter-spacing: -0.8px; }