/* ═══════════════════════════════════════════════════════════════
   Grain — DayPay Design System · Tokens
   v1.0 · Distilled from DayPay Wireframes v0.1
   语义角色(roles)是公开 API;色阶(ramps)是实现细节。
   暗色模式只重解析角色 — 组件 CSS 永不改动。
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Meadow — money green ─────────────────────────────────── */
  --meadow-50:  #EDF7F1;
  --meadow-100: #D8EEE2;
  --meadow-200: #AEDCC5;
  --meadow-300: #7FC9A6;
  --meadow-400: #45B384;
  --meadow-500: #1C9E6B;   /* ★ wireframe 原色,未改动 */
  --meadow-600: #15805A;
  --meadow-700: #10634A;
  --meadow-800: #0C4736;

  /* ── Evergreen — brand ink ────────────────────────────────── */
  --evergreen: #13261F;    /* wireframe 钱包卡的深绿 */

  /* ── Paper — warm, green-biased neutrals ──────────────────── */
  --paper-0:   #FFFFFF;
  --paper-50:  #F6F5F0;
  --paper-100: #EFEDE6;    /* 源自 wireframe 画布 #e7e5df */
  --paper-200: #E3E1D8;
  --paper-300: #CFCEC4;
  --paper-400: #A8AAA1;
  --paper-500: #7C8078;
  --paper-600: #5C615A;
  --paper-700: #3E443F;
  --paper-800: #28302A;

  /* ── Accents — semantic only, never decorative ────────────── */
  --clay-500:  #D6562F;    /* critical */
  --clay-100:  #F8E3DA;
  --clay-700:  #A83E1F;
  --amber-500: #C08A1E;    /* warning */
  --amber-100: #F6ECD6;
  --amber-700: #8F6512;

  /* ── Roles (public API) — light ───────────────────────────── */
  --bg:                var(--paper-100);
  --surface:           var(--paper-0);
  --surface-sunken:    var(--paper-50);
  --surface-brand:     var(--evergreen);
  --ink:               #1B2B23;
  --ink-2:             var(--paper-600);
  --ink-3:             var(--paper-500);
  --ink-on-brand:      #F2F5F1;
  --ink-on-brand-2:    #9FB4A8;
  --line:              var(--paper-200);
  --line-strong:       var(--paper-300);
  --primary:           var(--meadow-500);
  --primary-hover:     var(--meadow-600);
  --primary-quiet:     var(--meadow-50);
  --primary-quiet-line:var(--meadow-200);
  --on-primary:        #FFFFFF;
  --credit:            var(--meadow-600);  /* 入账:绿 */
  --debit:             var(--ink);         /* 出账:墨色,消费不是错误 */
  --critical:          var(--clay-500);
  --critical-quiet:    var(--clay-100);
  --critical-strong:   var(--clay-700);
  --warning:           var(--amber-500);
  --warning-quiet:     var(--amber-100);
  --warning-strong:    var(--amber-700);
  --focus:             #2E7FD6;

  /* ── Elevation — evergreen-tinted, never pure black ───────── */
  --shadow-1: 0 1px 2px rgba(19,38,31,.06);
  --shadow-2: 0 4px 12px rgba(19,38,31,.08);
  --shadow-3: 0 16px 40px rgba(19,38,31,.14);

  /* ── Shape ────────────────────────────────────────────────── */
  --r-xs: 6px;   /* 微元素 */
  --r-sm: 8px;   /* 控件 */
  --r-md: 12px;  /* 卡片 */
  --r-lg: 16px;  /* 面板 */
  --r-xl: 24px;  /* 弹层 / sheet */
  --r-pill: 999px;

  /* ── Spacing — 4px base grid ──────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;
}

/* ── Dark — roles re-resolve; system setting (un-stamped) ───── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:                #0F1A14;
    --surface:           #182620;
    --surface-sunken:    #131F19;
    --surface-brand:     #0C1610;
    --ink:               #E7EEE9;
    --ink-2:             #A3B2A9;
    --ink-3:             #77857C;
    --ink-on-brand:      #E7EEE9;
    --ink-on-brand-2:    #8CA195;
    --line:              #26362E;
    --line-strong:       #33453B;
    --primary:           #2FB27D;
    --primary-hover:     #45C08D;
    --primary-quiet:     #173226;
    --primary-quiet-line:#245640;
    --on-primary:        #07130D;
    --credit:            #4EC694;
    --debit:             var(--ink);
    --critical:          #E4744F;
    --critical-quiet:    #3A211A;
    --critical-strong:   #F0987C;
    --warning:           #D3A344;
    --warning-quiet:     #33290F;
    --warning-strong:    #E4BE71;
    --focus:             #66A9EE;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3);
    --shadow-2: 0 4px 12px rgba(0,0,0,.35);
    --shadow-3: 0 16px 40px rgba(0,0,0,.5);
  }
}

/* ── Dark — explicit user choice ────────────────────────────── */
:root[data-theme="dark"] {
  --bg:                #0F1A14;
  --surface:           #182620;
  --surface-sunken:    #131F19;
  --surface-brand:     #0C1610;
  --ink:               #E7EEE9;
  --ink-2:             #A3B2A9;
  --ink-3:             #77857C;
  --ink-on-brand:      #E7EEE9;
  --ink-on-brand-2:    #8CA195;
  --line:              #26362E;
  --line-strong:       #33453B;
  --primary:           #2FB27D;
  --primary-hover:     #45C08D;
  --primary-quiet:     #173226;
  --primary-quiet-line:#245640;
  --on-primary:        #07130D;
  --credit:            #4EC694;
  --debit:             var(--ink);
  --critical:          #E4744F;
  --critical-quiet:    #3A211A;
  --critical-strong:   #F0987C;
  --warning:           #D3A344;
  --warning-quiet:     #33290F;
  --warning-strong:    #E4BE71;
  --focus:             #66A9EE;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,.35);
  --shadow-3: 0 16px 40px rgba(0,0,0,.5);
}