/* ============================================================
   DELVE AI DESIGN SYSTEM — Colors & Typography Tokens
   Inspired by iOS 26 Liquid Glass · Warm Financial Aesthetic
   ============================================================ */

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

:root {

  /* ── PRIMITIVE COLOR PALETTE ──────────────────────────── */

  /* Warm Neutrals */
  --color-linen-50:  #FDFCFA;
  --color-linen-100: #FAF8F5;
  --color-linen-200: #F4F0EA;
  --color-linen-300: #EAE3D8;
  --color-linen-400: #D9CFC1;
  --color-linen-500: #C4B8A6;
  --color-linen-600: #A89888;
  --color-linen-700: #8A7A6C;
  --color-linen-800: #5E5148;
  --color-linen-900: #332C27;
  --color-linen-950: #1A1714;

  /* Warm Slate (text) */
  --color-slate-50:  #F7F6F4;
  --color-slate-100: #EEEDEA;
  --color-slate-200: #D8D5D0;
  --color-slate-300: #B8B4AE;
  --color-slate-400: #918D86;
  --color-slate-500: #706C66;
  --color-slate-600: #55524D;
  --color-slate-700: #3D3A36;
  --color-slate-800: #2A2724;
  --color-slate-900: #1A1714;
  --color-slate-950: #0D0B09;

  /* Amber Gold (primary accent) */
  --color-amber-50:  #FDF8EE;
  --color-amber-100: #FAEDCE;
  --color-amber-200: #F4D89A;
  --color-amber-300: #EBBE5E;
  --color-amber-400: #DFA332;
  --color-amber-500: #C8922A;
  --color-amber-600: #A97520;
  --color-amber-700: #865A18;
  --color-amber-800: #5E3F11;
  --color-amber-900: #3A270A;

  /* Sage Green (positive / gain) */
  --color-sage-50:  #EEF5F1;
  --color-sage-100: #D4EAE0;
  --color-sage-200: #A8D4C0;
  --color-sage-300: #72B89A;
  --color-sage-400: #45997A;
  --color-sage-500: #2D7D5F;
  --color-sage-600: #236349;
  --color-sage-700: #1A4A36;
  --color-sage-800: #123224;
  --color-sage-900: #091A13;

  /* Terracotta (negative / loss) */
  --color-terra-50:  #FBF0EE;
  --color-terra-100: #F5D8D3;
  --color-terra-200: #EBB0A6;
  --color-terra-300: #DA8070;
  --color-terra-400: #CC5C47;
  --color-terra-500: #C0442A;
  --color-terra-600: #9C3421;
  --color-terra-700: #762619;
  --color-terra-800: #4F1910;
  --color-terra-900: #2A0D08;

  /* Navy (dark surfaces / dark mode) */
  --color-navy-50:  #EEF1F6;
  --color-navy-100: #D4DCE9;
  --color-navy-200: #A8B8D3;
  --color-navy-300: #7490B8;
  --color-navy-400: #4B6A99;
  --color-navy-500: #2D4D7A;
  --color-navy-600: #1E3560;
  --color-navy-700: #132444;
  --color-navy-800: #0C172C;
  --color-navy-900: #0F1623;

  /* Pure */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ── SEMANTIC COLORS ──────────────────────────────────── */

  /* Backgrounds */
  --bg-base:        var(--color-linen-100);   /* Page background */
  --bg-subtle:      var(--color-linen-200);   /* Section / panel bg */
  --bg-surface:     var(--color-linen-50);    /* Card / input bg */
  --bg-overlay:     rgba(15, 22, 35, 0.72);   /* Modal scrim */
  --bg-dark:        var(--color-navy-900);    /* Dark surface */

  /* Glass Surfaces */
  --glass-light:    rgba(255, 252, 248, 0.72);
  --glass-mid:      rgba(250, 248, 245, 0.60);
  --glass-dark:     rgba(15, 22, 35, 0.68);
  --glass-border:   rgba(255, 255, 255, 0.45);
  --glass-border-dark: rgba(255, 255, 255, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.60);

  /* Foreground / Text */
  --fg-primary:     var(--color-slate-900);
  --fg-secondary:   var(--color-slate-600);
  --fg-tertiary:    var(--color-slate-400);
  --fg-disabled:    var(--color-slate-300);
  --fg-on-dark:     rgba(255, 252, 248, 0.92);
  --fg-on-dark-2:   rgba(255, 252, 248, 0.60);
  --fg-accent:      var(--color-amber-500);

  /* Interactive */
  --interactive-primary:       var(--color-amber-500);
  --interactive-primary-hover: var(--color-amber-600);
  --interactive-primary-press: var(--color-amber-700);
  --interactive-secondary:     var(--color-linen-300);
  --interactive-secondary-hover: var(--color-linen-400);

  /* Borders */
  --border-subtle:  rgba(26, 23, 20, 0.07);
  --border-default: rgba(26, 23, 20, 0.12);
  --border-strong:  rgba(26, 23, 20, 0.24);
  --border-accent:  var(--color-amber-500);

  /* Semantic Status */
  --status-positive:        var(--color-sage-500);
  --status-positive-bg:     var(--color-sage-50);
  --status-positive-border: var(--color-sage-200);
  --status-negative:        var(--color-terra-500);
  --status-negative-bg:     var(--color-terra-50);
  --status-negative-border: var(--color-terra-200);
  --status-neutral:         var(--color-slate-500);
  --status-neutral-bg:      var(--color-linen-200);
  --status-warning:         var(--color-amber-400);
  --status-warning-bg:      var(--color-amber-50);

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-sm:  0 2px 8px rgba(26, 23, 20, 0.06);
  --shadow-md:  0 8px 24px rgba(26, 23, 20, 0.10), 0 1px 3px rgba(26, 23, 20, 0.06);
  --shadow-lg:  0 24px 64px rgba(26, 23, 20, 0.14), 0 4px 12px rgba(26, 23, 20, 0.07);
  --shadow-xl:  0 40px 96px rgba(26, 23, 20, 0.18), 0 8px 24px rgba(26, 23, 20, 0.08);
  --shadow-glow-amber: 0 0 24px rgba(200, 146, 42, 0.20);
  --shadow-glass: var(--shadow-sm), var(--glass-highlight);

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── SPACING ──────────────────────────────────────────── */
  --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;

  /* ── TYPOGRAPHY ───────────────────────────────────────── */

  /* Font Families */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-snug:    1.30;
  --leading-normal:  1.50;
  --leading-relaxed: 1.65;

  /* Letter Spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.12em;

  /* ── ANIMATION ────────────────────────────────────────── */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --duration-xs:  100ms;
  --duration-sm:  180ms;
  --duration-md:  280ms;
  --duration-lg:  400ms;
}

/* ── SEMANTIC TYPE STYLES ─────────────────────────────── */

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.display-1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h1, .h1 {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.numeric {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.numeric-large {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* ── GLASS UTILITY CLASSES ────────────────────────────── */

.glass {
  background: var(--glass-light);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md), var(--glass-highlight);
}

.glass-dark {
  background: var(--glass-dark);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
}

.glass-subtle {
  background: rgba(255, 252, 248, 0.50);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.30);
}

/* ── WARM BACKGROUND ──────────────────────────────────── */

.bg-warm {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(200,146,42,0.07) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}