/* ───────────────────────────────────────────────────────────────────────────
 * ShabuBox — tokens.css (shared family brand with Memophant)
 *
 * The foundational token layer for the Memophant brand: a calm, native-macOS
 * command center for repo-resident AI project memory. One confident green
 * accent over cool paper, four re-tuned tier hues, SF Pro / SF Mono type.
 *
 * Source of truth: the shipped marketing site (web/src/styles/tokens.css,
 * ported from design_handoff_memophant_2026/Swift/Theme.swift). The app's
 * documented alternate accent is indigo (#5A5DC8); the SHIPPED brand is the
 * green below — use green unless told otherwise.
 *
 * Light is default; [data-theme="dark"] (or .dark) flips surfaces + accent.
 * ─────────────────────────────────────────────────────────────────────────── */

/* SF Pro / SF Mono are macOS system faces. On the web they fall back to Inter
 * (UI/body/display) and JetBrains Mono (paths, tokens, counts). */

:root {
  /* ───── Brand / accent — one confident green ("Memophant green") ───── */
  --accent:        #2E946A;
  --accent-hover:  #27805B;
  --accent-active: #1F6A4B;
  --accent-tint:   rgba(46, 148, 106, 0.10);
  --accent-tint-strong: rgba(46, 148, 106, 0.18);
  --on-accent:     #FFFFFF;

  /* Documented alternate accent (the app's "memory blue-violet" indigo). */
  --brand-indigo:  #5A5DC8;

  /* Full green ramp (derived from the accent for swatches/gradients) */
  --green-50:  #E7F4EE;
  --green-100: #DCEFE4;
  --green-200: #B6E0CB;
  --green-300: #86CDA9;
  --green-400: #56C295;   /* dark-mode accent / gradient highlight */
  --green-500: #2E946A;   /* primary accent */
  --green-600: #27805B;
  --green-700: #1F6A4B;
  --green-800: #185338;
  --green-900: #0F3826;

  /* ───── Neutrals — cool paper, near-neutral (deliberately not warm/cream) ───── */
  --gray-0:   #FFFFFF;
  --gray-50:  #F7F8FA;   /* cool paper — the page / app ground */
  --gray-100: #EFF0F3;
  --gray-200: #E4E5E9;
  --gray-300: #D2D4DA;
  --gray-400: #ABADB5;
  --gray-500: #82858C;
  --gray-600: #62646B;
  --gray-700: #44464C;
  --gray-800: #2A2B30;
  --gray-900: #18191D;
  --gray-950: #0E0F12;

  /* ───── Semantic status (success is green, independent of the Tasks tier) ───── */
  --success:     #4E9E76;
  --success-tint:#DCEFE4;
  --warning:     #D89A4A;
  --warning-tint:#F8E9CF;
  --destructive: #CF5A52;
  --destructive-tint: #F6DCD9;
  --info:        #4A7BB5;
  --info-tint:   #DCE8F4;

  /* ───── Four tier hues — Memories=amber · Wiki=slate-blue · Design=plum · Tasks=rose ───── */
  --tier-memories:      #C77B41;  --tier-memories-tint: #F4E6D4;  --tier-memories-fg: #9A5A22;
  --tier-wiki:          #4A7BB5;  --tier-wiki-tint:     #DEE9F4;  --tier-wiki-fg:     #305F95;
  --tier-design:        #9B5FB0;  --tier-design-tint:   #ECDDF1;  --tier-design-fg:   #774189;
  --tier-tasks:         #C2607C;  --tier-tasks-tint:    #F4E0E8;  --tier-tasks-fg:    #9E4763;

  /* ───── Surfaces (light) ───── */
  --fg:        #18191D;
  --fg-muted:  #62646B;
  --fg-faint:  #82858C;
  --bg:        #F7F8FA;
  --bg-card:   #FFFFFF;
  --bg-tertiary:   rgba(30, 32, 40, 0.07);
  --bg-quaternary: rgba(30, 32, 40, 0.045);
  --border:        rgba(28, 30, 40, 0.09);
  --border-strong: rgba(28, 30, 40, 0.14);

  /* ───── Type stacks ───── */
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ───── Type scale (px) ───── */
  --text-caption2: 10px;
  --text-caption:  12px;
  --text-footnote: 13px;
  --text-body:     14px;
  --text-callout:  15px;
  --text-subhead:  16px;
  --text-headline: 17px;
  --text-title3:   20px;
  --text-title2:   23px;
  --text-title1:   29px;
  --text-largeTitle: 36px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.62;

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

  /* ───── Radii ───── */
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 9px;
  --radius-xl: 13px;
  --radius-2xl: 16px;
  --radius-window: 14px;
  --radius-pill: 999px;

  /* ───── Spacing (4px grid) ───── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ───── Elevation — soft, neutral shadows only (no colored glows) ───── */
  --shadow-sm: 0 1px 2px rgba(38, 36, 30, 0.05);
  --shadow-md: 0 1px 2px rgba(38, 36, 30, 0.04), 0 4px 12px rgba(38, 36, 30, 0.05);
  --shadow-lg: 0 2px 4px rgba(38, 36, 30, 0.06), 0 10px 28px rgba(38, 36, 30, 0.08);
  --shadow-xl: 0 4px 8px rgba(38, 36, 30, 0.08), 0 20px 48px rgba(38, 36, 30, 0.12);
  --focus-ring: 0 0 0 3px rgba(46, 148, 106, 0.28);

  /* ───── Gradients ───── */
  --gradient-brand: linear-gradient(135deg, #56C295 0%, #2E946A 50%, #1F6A4B 100%);
  --gradient-brand-soft: linear-gradient(150deg, #DCEFE4 0%, #B6E0CB 100%);

  /* ───── Motion ───── */
  --dur-fast: 120ms;   /* hover / press */
  --dur-base: 220ms;   /* disclosure, crossfade, list reflow */
  --dur-slow: 320ms;   /* navigation, slide-overs, modal scale-in */
  --ease-primary:  cubic-bezier(0.32, 0.72, 0, 1);   /* ≈ SwiftUI easeInOut */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);    /* softer entrances */
}

[data-theme="dark"], .dark {
  --accent:        #56C295;
  --accent-hover:  #6BCBA0;
  --accent-active: #2E946A;
  --accent-tint:   rgba(86, 194, 149, 0.16);
  --accent-tint-strong: rgba(86, 194, 149, 0.26);

  --gray-0:  #1C1C24;

  --fg:        #ECEBF2;
  --fg-muted:  #9C9AA8;
  --fg-faint:  #6A6876;
  --bg:        #131318;   /* deep matte, faint violet bleed */
  --bg-card:   #1C1C24;
  --bg-tertiary:   rgba(225, 224, 245, 0.08);
  --bg-quaternary: rgba(225, 224, 245, 0.05);
  --border:        rgba(225, 224, 245, 0.09);
  --border-strong: rgba(225, 224, 245, 0.16);

  --success:     #6FBF94;
  --warning:     #E0A569;
  --destructive: #E07B73;
  --info:        #84ADDD;

  --tier-memories: #E0A569;  --tier-memories-tint: rgba(199, 123, 65, 0.18);  --tier-memories-fg: #E0A569;
  --tier-wiki:     #84ADDD;  --tier-wiki-tint:     rgba(96, 142, 200, 0.18);  --tier-wiki-fg:     #84ADDD;
  --tier-design:   #C595D6;  --tier-design-tint:   rgba(173, 116, 196, 0.18); --tier-design-fg:   #C595D6;
  --tier-tasks:    #DB9DB2;  --tier-tasks-tint:    rgba(194, 96, 124, 0.18);  --tier-tasks-fg:    #DB9DB2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 3px rgba(86, 194, 149, 0.32);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Semantic type roles — apply these classes directly.
 * ─────────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

.display { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
h1, .h1 { font-family: var(--font-display); font-size: var(--text-largeTitle); font-weight: 600; line-height: 1.15; letter-spacing: -0.022em; }
h2, .h2 { font-family: var(--font-display); font-size: var(--text-title1); font-weight: 600; line-height: 1.18; letter-spacing: -0.018em; }
h3, .h3 { font-family: var(--font-display); font-size: var(--text-title2); font-weight: 600; line-height: 1.3;  letter-spacing: -0.012em; }
.headline { font-family: var(--font-sans); font-size: var(--text-headline); font-weight: 600; line-height: 1.35; letter-spacing: -0.006em; }
.lead { font-size: var(--text-subhead); line-height: 1.55; color: var(--fg-muted); }
p, .body { font-size: var(--text-body); line-height: var(--leading-normal); }
.reader-body { font-size: var(--text-callout); line-height: var(--leading-relaxed); }
.callout { font-size: var(--text-callout); }
.footnote { font-size: var(--text-footnote); color: var(--fg-muted); }
.caption { font-size: var(--text-caption); color: var(--fg-muted); }
.eyebrow { font-size: var(--text-caption); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-quaternary); padding: 1px 5px; border-radius: var(--radius-sm); }