/* ======================================================================
   MONEO — Design Tokens
   Dark-only, mobile-first finance app. Colors + type only.
   Source of truth: lib/core/themes/app_colors.dart + app_theme.dart
   ====================================================================== */

/* ---- Roboto (Flutter default on Android; web substitute for SF Pro on iOS) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

:root {
  /* ── Neutrals (dark scale) ─────────────────────────────────────────── */
  --c-bg-main:        #121212;  /* scaffold, page body */
  --c-bg-secondary:   #1E1E1E;  /* cards, sheets, navbar, hero block */
  --c-bg-third:       #242424;  /* input fills, chip bg, divider, track */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --c-white:          #FAFAFA;  /* inverse text on primary-red buttons */
  --c-text-main:      #ECECEC;  /* primary text (never pure white) */
  --c-text-secondary: #BDBDBD;  /* secondary text, captions */
  --c-grey-1:         #8A8A8A;  /* hints, placeholders, disabled */
  --c-grey-2:         #BDBDBD;  /* alias of text-secondary */
  --c-light-grey:     #E0E0E0;

  /* ── Brand ─────────────────────────────────────────────────────────── */
  --c-primary:        #F44336;  /* "primaryRed" — FAB, active, headers */
  --c-primary-light:  #E57373;  /* link actions, secondary buttons */
  --c-primary-dark:   #C62828;

  /* ── Signals ───────────────────────────────────────────────────────── */
  --c-success:        #4CAF50;  /* "primaryGreen" — income, pointed */
  --c-success-light:  #81C784;
  --c-success-dark:   #2E7D32;
  --c-error:          #E53935;
  --c-warning:        #FFA726;

  /* ── Semantic aliases (match dart names) ───────────────────────────── */
  --c-link:           var(--c-primary-light);
  --c-main-color:     var(--c-primary);
  --c-secondary-color:var(--c-success);

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --r-xs:   8px;    /* mini action icons */
  --r-sm:  12px;    /* small chips, dividers */
  --r-md:  16px;    /* buttons, inputs, default */
  --r-lg:  20px;    /* cards, transaction tiles, settings groups */
  --r-xl:  24px;    /* account cards, dialogs, stats cards */
  --r-2xl: 32px;    /* bottom-sheet top corners */
  --r-hero: 40px;   /* dashboard/login hero bottom curve */
  --r-pill: 999px;

  /* ── Spacing (base 4) ──────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10:40px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-fab: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* ── Type scale ────────────────────────────────────────────────────── */
  --font-sans: 'Roboto', 'SF Pro Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;
  --fw-black:   900;

  /* Display + headlines */
  --fs-hero:     40px;  /* dashboard balance */
  --fs-h1:       32px;  /* headlineLarge */
  --fs-h2:       26px;  /* headlineMedium — onboarding */
  --fs-h3:       22px;  /* headlineSmall */
  --fs-app-bar:  20px;  /* AppBar title */
  --fs-title:    18px;  /* titleLarge — section title inline */
  --fs-body:     15px;  /* default body */
  --fs-sm:       14px;
  --fs-xs:       13px;
  --fs-caption:  12px;
  --fs-mini:     11px;  /* section-header CAPS */
  --fs-tiny:     10px;
  --fs-micro:     8px;  /* MENSUEL badge */
}

/* ──────────────────────────────────────────────────────────────────────
   Base element styles (semantic)
   Use with <h1> / <h2> / etc. directly, or with .ds-* classes.
   ────────────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans), sans-serif;
  background: var(--c-bg-main);
  color: var(--c-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-body);
  line-height: 1.4;
}

h1, .ds-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  color: var(--c-text-main);
  letter-spacing: -0.2px;
  margin: 0;
}
h2, .ds-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
  color: var(--c-text-main);
  margin: 0;
}
h3, .ds-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-text-main);
  margin: 0;
}
h4, .ds-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--c-text-main);
  margin: 0;
}
p, .ds-body {
  font-size: var(--fs-body);
  color: var(--c-text-main);
  margin: 0;
}
small, .ds-caption {
  font-size: var(--fs-caption);
  color: var(--c-text-secondary);
}

/* Balance hero — the giant number on the dashboard */
.ds-hero-balance {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  color: var(--c-text-main);
  letter-spacing: -0.5px;
}

/* Section header — small caps red label (e.g. CONFIGURATION, EN BREF) */
.ds-section-header {
  font-size: var(--fs-mini);
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  color: var(--c-primary);
  text-transform: uppercase;
}

/* Signed-amount helpers */
.ds-amount         { font-weight: var(--fw-black); font-size: var(--fs-body); }
.ds-amount.neg     { color: var(--c-primary); }
.ds-amount.pos     { color: var(--c-success); }
.ds-amount.checked { color: var(--c-grey-1); text-decoration: line-through; }

/* MENSUEL badge */
.ds-mensuel-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  color: var(--c-primary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.4px;
}