/* ============================================================================
   BRAND TOKENS  —  THE single source of truth for the look.

   This is a deliberately NEUTRAL PLACEHOLDER (monochrome, one accent).
   To drop in the real brand later, you only touch:
     1. this file            -> all colors, fonts, corner radius
     2. /js/brand.js         -> name, tagline, domain (text)
     3. /img/logo-mark.png   -> the logo  (+ run tools/make_icons.py to rebuild
                                 the favicons, app icons, and apple-touch icon)
   Nothing in app.css, the pages, or the backend needs editing for a reskin.

   Want color? Change --brand-accent (and optionally --brand-positive /
   --brand-alert). Want a typeface? Change the @import and the --brand-font-*.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---- neutrals ---------------------------------------------------------- */
  --brand-paper:     #FFFFFF;   /* page background                           */
  --brand-surface:   #F3F3F1;   /* section fills, subtle panels              */
  --brand-card:      #FFFFFF;   /* cards                                     */
  --brand-ink:       #16150F;   /* primary text + punctuation                */
  --brand-ink-soft:  #34322B;
  --brand-muted:     #6C6A63;   /* secondary text                           */
  --brand-line:      #E7E6E1;   /* hairlines, borders                       */

  /* ---- accent (placeholder = monochrome; change THIS to add color) ------- */
  --brand-accent:        #16150F;   /* primary buttons, active states        */
  --brand-accent-press:  #000000;   /* pressed                               */
  --brand-accent-ink:    #FFFFFF;   /* text/icon on the accent               */

  /* ---- functional states (placeholder maps to neutrals) ------------------ */
  --brand-positive:       #16150F;  /* "savings unlocked" (give it green later) */
  --brand-positive-soft:  #EFEFEC;  /* unlocked fill                          */
  --brand-alert:          #16150F;  /* "ends soon" (give it a warm later)     */
  --brand-alert-soft:     #EFEFEC;

  /* ---- type -------------------------------------------------------------- */
  --brand-font-display: "Inter", system-ui, sans-serif;
  --brand-font-body:    "Inter", system-ui, sans-serif;
  --brand-font-mono:    "Inter", ui-monospace, "SF Mono", monospace; /* tabular figures used for prices/timers */

  /* ---- shape ------------------------------------------------------------- */
  --brand-radius:    12px;
  --brand-radius-sm: 8px;

  /* ---- elevation (kept neutral) ----------------------------------------- */
  --brand-shadow:    0 1px 0 rgba(20,20,16,.04), 0 8px 24px -16px rgba(20,20,16,.22);
  --brand-shadow-lg: 0 2px 0 rgba(20,20,16,.05), 0 30px 60px -30px rgba(20,20,16,.30);
}