/* ============================================================
   Cascalho Design Tokens
   Centralized design system variables. Light + dark theme.
   ============================================================ */

:root {
  /* ============================================================
     Cascalho — "Editorial Warmth" theme
     Warm cream canvas, forest-green brand, terracotta accents.
     Inspired by premium Italian/Brazilian banking apps.
     ============================================================ */

  /* --- Brand: forest green (growth, trust, wealth) --- */
  --primary: #1f4d3a;          /* deep forest green */
  --primary-dark: #143528;
  --primary-50: #eff4f1;
  --primary-100: #dbe6df;
  --primary-500: #2d6a4f;       /* mid green */
  --primary-600: #1f4d3a;
  --primary-700: #143528;
  --primary-accent: #86a890;    /* dusty sage (subtle accents) */

  /* --- Secondary: terracotta (warmth, partnership) --- */
  --secondary: #c97b5a;         /* terracotta */
  --secondary-dark: #a85e40;
  --secondary-50: #faf1ec;

  /* --- Accent: warm gold (premium highlight) --- */
  --accent-gold: #c8a951;
  --accent-gold-50: #f9f4e4;

  /* --- Partner colors (for person1/person2 differentiation) --- */
  --person1: #2d6a4f;           /* sage green — person 1 */
  --person1-bg: #eff4f1;
  --person2: #b0654f;           /* dusty terracotta — person 2 */
  --person2-bg: #faf1ec;

  /* --- Semantic (warm, not cold) --- */
  --success: #2d6a4f;
  --success-bg: #eff4f1;
  --success-text: #143528;

  --warning: #b8860b;
  --warning-bg: #f9f4e4;
  --warning-text: #6b4e09;

  --danger: #a03e3e;
  --danger-bg: #f6e8e8;
  --danger-text: #6b2a2a;

  --info: #3a6b8a;
  --info-bg: #e9eff5;
  --info-text: #203f54;

  /* --- Warm neutral scale (not cold slate — inspired by paper/cream) --- */
  --gray-50:  #faf7f2;          /* warm cream — hero canvas */
  --gray-100: #f3ede3;          /* light parchment */
  --gray-200: #e8e0d2;          /* soft border */
  --gray-300: #d4c8b4;          /* medium border */
  --gray-400: #a89b82;          /* muted warm tan */
  --gray-500: #7a6f58;          /* body secondary */
  --gray-600: #5c5444;          /* body muted */
  --gray-700: #3e382d;          /* body strong */
  --gray-800: #26231d;          /* dark near-black warm */
  --gray-900: #1a1815;          /* darkest warm */

  /* --- Legacy aliases (keep for backward compat with inline styles) --- */
  --dark: var(--gray-800);
  --gray: var(--gray-600);  /* darkened from #64748b to #475569 for AA contrast */
  --light: var(--gray-100);
  --white: #ffffff;
  --purple: #a855f7;
  --indigo: var(--primary);

  /* --- Surfaces (warm paper-like, not sterile white) --- */
  --surface-app: #f5efe3;       /* app canvas — warm cream */
  --surface: #fbf8f1;           /* card base — slightly lighter cream */
  --surface-elevated: #ffffff;  /* modal/popover */
  --surface-muted: #f0e8da;     /* subtle tonal variation */
  --surface-hero: #1f4d3a;      /* green premium hero */
  --surface-hero-text: #f5efe3; /* cream on green */
  --surface-overlay: rgba(38, 35, 29, 0.55);

  /* Subtle tinted surfaces for data zones */
  --surface-tint-green: #edf3ef;
  --surface-tint-terra: #faf1ec;
  --surface-tint-gold: #f9f4e4;

  /* --- Text --- */
  --text: var(--gray-800);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-inverse: #ffffff;
  --text-link: var(--primary);

  /* --- Borders --- */
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--primary);

  /* --- Spacing (4px scale) --- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* --- Radii --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);

  /* --- Typography: distinctive pairing --- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Source Serif Pro', 'Georgia', serif;
  --font-number:  'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-3xl:  32px;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --- Motion --- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Breakpoints (for reference; used in media queries) --- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* --- Z-index scale --- */
  --z-base:      1;
  --z-sticky:    100;
  --z-header:    200;
  --z-dropdown:  500;
  --z-modal:     1000;
  --z-toast:     2000;
  --z-tooltip:   3000;
}

/* ============================================================
   Dark theme — warm charcoal with gold accents, not cold slate
   ============================================================ */
[data-theme="dark"] {
  --primary: #7fb39a;           /* lighter sage for dark mode */
  --primary-dark: #5f9a7d;
  --primary-50:  rgba(127, 179, 154, 0.1);
  --primary-100: rgba(127, 179, 154, 0.18);
  --accent-gold: #d4b568;

  --surface-app: #1a1612;       /* warm near-black */
  --surface: #22201c;           /* warm dark brown */
  --surface-elevated: #2a2722;
  --surface-muted: #2e2b25;
  --surface-hero: #0f2a1f;
  --surface-hero-text: #e8dcbf;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  --surface-tint-green: #1d2e24;
  --surface-tint-terra: #2e221c;
  --surface-tint-gold: #2a2619;

  --text: #ebe4d3;              /* warm off-white */
  --text-muted: #b8ae93;
  --text-subtle: #857b62;

  --border: #3a3630;
  --border-strong: #4d4740;

  --gray-50:  #22201c;
  --gray-100: #2a2722;
  --gray-200: #3a3630;
  --gray-300: #4d4740;

  --dark: #ebe4d3;
  --gray: #b8ae93;
  --light: #2a2722;

  --success: #7fb39a;
  --success-bg: rgba(127, 179, 154, 0.14);
  --warning-bg: rgba(212, 181, 104, 0.14);
  --danger-bg:  rgba(201, 123, 90, 0.16);
  --info-bg:    rgba(130, 160, 190, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-focus: 0 0 0 3px rgba(127, 179, 154, 0.35);

  --person1: #7fb39a;
  --person1-bg: rgba(127, 179, 154, 0.14);
  --person2: #d19a7f;
  --person2-bg: rgba(209, 154, 127, 0.14);
}

/* Respect OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #7fb39a;
    --primary-dark: #5f9a7d;
    --primary-50:  rgba(127, 179, 154, 0.1);
    --primary-100: rgba(127, 179, 154, 0.18);
    --accent-gold: #d4b568;

    --surface-app: #1a1612;
    --surface: #22201c;
    --surface-elevated: #2a2722;
    --surface-muted: #2e2b25;
    --surface-hero: #0f2a1f;
    --surface-tint-green: #1d2e24;
    --surface-tint-terra: #2e221c;
    --surface-tint-gold: #2a2619;

    --text: #ebe4d3;
    --text-muted: #b8ae93;
    --text-subtle: #857b62;
    --border: #3a3630;
    --border-strong: #4d4740;
    --gray-50: #22201c;
    --gray-100: #2a2722;
    --gray-200: #3a3630;
    --gray-300: #4d4740;
    --dark: #ebe4d3;
    --gray: #b8ae93;
    --light: #2a2722;
    --person1: #7fb39a;
    --person1-bg: rgba(127, 179, 154, 0.14);
    --person2: #d19a7f;
    --person2-bg: rgba(209, 154, 127, 0.14);
  }
}