/* =========================================================================
   Cash Coach AI — Colors & Type
   Extracted from KT-Financial/CashCoach-APP (src/theme, src/assets/fonts)
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ====================================================================
     COLOR TOKENS — Cash Coach is dark-first. Primary is lime-green.
     Numeric suffix = intensity within that hue (0 = white/lightest).
     ==================================================================== */

  /* Primary — signature Cash Coach lime */
  --primary-100: #1C2810;
  --primary-90:  #253A14;
  --primary-80:  #3F5E23;
  --primary-75:  #D4F75F;   /* brand mark / CTAs — the signature lime */
  --primary-50:  #E3FA8F;
  --primary-25:  #F0FBBD;
  --primary-10:  #F8FDE1;

  /* Secondary — supporting mint/teal */
  --secondary-100: #0E1D1B;
  --secondary-90:  #143A35;
  --secondary-75:  #4CD3C1;
  --secondary-50:  #9FE7DD;
  --secondary-25:  #CFF3ED;

  /* Grey / Neutral — the dark-theme backbone */
  --grey-0:    #FFFFFF;
  --grey-5:    #F5F6F7;
  --grey-10:   #E9EBEE;
  --grey-25:   #BFC3C9;
  --grey-50:   #7A8089;
  --grey-75:   #3B4048;
  --grey-80:   #2A2E35;
  --grey-90:   #1A1D22;
  --grey-95:   #13151A;
  --grey-100:  #0B0D10;   /* app background */

  /* Semantic — state colors */
  --green-75:  #3FC678;   /* income / positive trend */
  --green-50:  #9CE2B9;
  --red-75:    #F25D5D;   /* expense / negative */
  --red-50:    #F8A7A7;
  --orange-75: #F3A83A;   /* warning */
  --orange-50: #FAD399;
  --blue-75:   #4D8CFF;   /* info */

  /* Surface — canonical semantic uses (dark theme) */
  --bg:             var(--grey-100);
  --bg-elevated:    var(--grey-90);
  --bg-sunken:      #06080A;
  --surface-1:      var(--grey-90);  /* standard card */
  --surface-2:      var(--grey-80);  /* raised card / sheet */
  --surface-3:      var(--grey-75);  /* input / chip */
  --surface-accent: #1F2B13;         /* tinted primary surface */

  /* Foreground */
  --fg:           var(--grey-0);
  --fg-muted:     var(--grey-25);
  --fg-subtle:    var(--grey-50);
  --fg-disabled:  var(--grey-75);
  --fg-inverse:   var(--grey-100);
  --fg-accent:    var(--primary-75);

  /* Border */
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-accent:  var(--primary-75);

  /* Semantic aliases */
  --success:  var(--green-75);
  --danger:   var(--red-75);
  --warning:  var(--orange-75);
  --info:     var(--blue-75);

  /* ====================================================================
     TYPOGRAPHY TOKENS
     ==================================================================== */

  --font-sans: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — tuned for mobile app + presentation use */
  --text-display-1: 700 44px/52px var(--font-sans);  /* hero balances */
  --text-display-2: 700 36px/44px var(--font-sans);  /* big numbers */
  --text-h1:        700 28px/34px var(--font-sans);  /* screen titles */
  --text-h2:        700 22px/28px var(--font-sans);  /* section titles */
  --text-h3:        600 18px/24px var(--font-sans);  /* card titles */
  --text-body:      500 16px/22px var(--font-sans);  /* default body */
  --text-body-sm:   500 14px/20px var(--font-sans);
  --text-label:     600 13px/16px var(--font-sans);  /* labels */
  --text-caption:   500 12px/16px var(--font-sans);  /* metadata */
  --text-button:    700 16px/20px var(--font-sans);

  /* Numeric (for currency, balances) — Manrope with tabular-nums */
  --text-currency-xl: 800 44px/52px var(--font-sans);
  --text-currency-lg: 700 28px/34px var(--font-sans);
  --text-currency-md: 700 18px/22px var(--font-sans);

  /* ====================================================================
     SPACING — 4pt grid
     ==================================================================== */

  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* Canonical layout values */
  --screen-pad-x:  20px;
  --screen-pad-y:  16px;
  --card-pad:      16px;
  --card-pad-lg:   20px;
  --stack-gap:     12px;
  --stack-gap-lg:  20px;

  /* ====================================================================
     RADII & SHADOWS
     ==================================================================== */

  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;   /* cards */
  --radius-xl:   24px;   /* hero cards, sheets */
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* Shadows — dark theme: subtle glow + deeper drop */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-accent: 0 8px 24px rgba(212, 247, 95, 0.25);

  /* ====================================================================
     MOTION
     ==================================================================== */

  --dur-xs: 120ms;
  --dur-sm: 180ms;
  --dur-md: 240ms;
  --dur-lg: 360ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================================================
   BASE ELEMENT STYLES — opt-in via class="cc-type" on a root
   ========================================================================= */

.cc-type, .cc-type * { font-family: var(--font-sans); }
.cc-type { color: var(--fg); background: var(--bg); }

.cc-type h1 { font: var(--text-h1); margin: 0; letter-spacing: -0.01em; }
.cc-type h2 { font: var(--text-h2); margin: 0; letter-spacing: -0.01em; }
.cc-type h3 { font: var(--text-h3); margin: 0; }
.cc-type p  { font: var(--text-body); margin: 0; color: var(--fg-muted); }
.cc-type small { font: var(--text-caption); color: var(--fg-subtle); }
.cc-type .cc-label { font: var(--text-label); letter-spacing: 0.02em; text-transform: none; color: var(--fg-muted); }
.cc-type .cc-num   { font: var(--text-currency-lg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cc-type .cc-num-xl{ font: var(--text-currency-xl); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* =========================================================================
   PRIMITIVES — reusable classes
   ========================================================================= */

.cc-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}
.cc-card--accent {
  background: var(--surface-accent);
  border: 1px solid var(--border-accent);
}
.cc-btn {
  font: var(--text-button);
  height: 52px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform var(--dur-xs) var(--ease-standard),
              background-color var(--dur-sm) var(--ease-standard),
              opacity var(--dur-sm) var(--ease-standard);
}
.cc-btn:active { transform: scale(0.97); }
.cc-btn--primary   { background: var(--primary-75); color: var(--grey-100); }
.cc-btn--secondary { background: var(--surface-2); color: var(--fg); }
.cc-btn--ghost     { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.cc-btn--danger    { background: var(--red-75); color: var(--grey-0); }
.cc-btn:disabled   { opacity: 0.4; cursor: not-allowed; }

.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--fg);
  font: var(--text-label);
}
.cc-chip--accent { background: var(--primary-75); color: var(--grey-100); }