/* Issaabuu design system — BlackBooks Lite palette, ported to CSS.
 *
 * PROVENANCE
 * Upstream: Issaabuu-OS/the_blackbooks_lite
 *   - light values  <- lib/core/theme/app_theme.dart, AppThemeData.light
 *                      ("Light palette ... — MAYA Edition")
 *   - dark values   <- lib/core/theme/app_colors.dart (declares itself
 *                      CANONICAL SOURCE; every other token file references it)
 *   - type ladder   <- lib/core/theme/app_typography.dart
 *   - spacing       <- lib/core/theme/app_spacing.dart
 *
 * Deliberately NOT ported from design_tokens.json. That file says v2.0.0 and
 * names app_colors.dart as its canonical source, but has since drifted from it
 * -- it carries bg #0A0A0A where the dart says #030303, textSecondary #7A7570
 * where the dart says #9A9186, danger #E05252 where the dart says #FF5C5C.
 * Copying the generated file would have imported a stale palette and called it
 * conformance. The dart is the truth; this file follows the dart.
 *
 * TariffSnap and BlackBooks Lite are two products of one company and a buyer
 * meets both. They share one visual language: warm parchment, never cold white;
 * deep amber gold; a serif display face over a humanist body face.
 *
 * CONTRAST
 * The light golds are not the dark golds lightened. Upstream re-solved them
 * against the light surfaces and recorded the ratios (goldPrimary 4.63:1 on the
 * worst light surface, AA for normal text). Those ratios are the reason for the
 * exact values; scripts/theme_contrast.js recomputes them here rather than
 * trusting this comment, which is how they drifted upstream in the first place.
 */

:root {
  color-scheme: light dark;

  /* ── Surfaces — warm parchment, never cold white ──────────────────────── */
  --color-bg: #F4F2EE;
  --color-surface: #FBF9F5;
  --color-surface-2: #F2EFE8;
  --color-surface-3: #E8E4DC;
  --color-surface-4: #DDD8CE;

  /* ── Brand gold ───────────────────────────────────────────────────────── */
  --color-gold: #8A6509;
  --color-gold-alt: #926207;
  --color-gold-light: #AF7D14;
  --color-gold-dim: #7A5A08;
  --color-gold-deep: #F0E4C4;
  --color-gold-shimmer: #FFF6E0;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --color-text: #1A1510;
  --color-text-secondary: #5A5244;
  --color-text-tertiary: #8A8275;
  --color-text-inverse: #FFFFFF;
  --color-disabled: #CFC9BD;

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --color-success: #1A7A46;
  --color-danger: #CC2E2E;
  --color-warning: #9A6400;
  --color-info: #1B5FBF;
  /* Tints behind a semantic figure. Pale washes of the hue above, so a number
     and its background never disagree about what they mean. */
  --color-success-tint: #E4EFE7;
  --color-danger-tint: #F7E7E6;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

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

  /* Golden-ratio / Fibonacci ladder (app_typography.dart). Seven rungs, and no
     style is allowed a size of its own. goldenMicro is the 11px legibility
     floor -- no user-facing text stands below it. */
  --size-micro: 11px;
  --size-small: 13px;
  --size-body: 14px;
  --size-lead: 16px;
  --size-h3: 34px;
  --size-h2: 55px;
  --size-h1: 89px;

  --leading-tight: 1.15;
  --leading-base: 1.6;

  /* ── Space — the same Fibonacci ladder ────────────────────────────────── */
  --space-xs: 5px;
  --space-sm: 8px;
  --space-md: 13px;
  --space-lg: 16px;
  --space-xl: 21px;
  --space-2xl: 34px;
  --space-3xl: 89px;

  /* ── Radius — cards are generous, pills are pills ─────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-modal: 24px;
  --radius-full: 999px;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --shadow-card: 0 2px 10px rgba(26, 21, 16, 0.05);
  --shadow-raised: 0 6px 24px rgba(26, 21, 16, 0.08);
  --shadow-gold: 0 6px 24px rgba(138, 101, 9, 0.20);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --motion-fast: 200ms;
  --motion-normal: 350ms;
}

/* Dark. Ported from app_colors.dart, which is the canonical file upstream.
   The gold inverts direction -- light on black, deep on parchment -- but the
   hue is the same, so a semantic state reads identically in both schemes. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #030303;
    --color-surface: #0C0C0C;
    --color-surface-2: #131313;
    --color-surface-3: #1A1A1A;
    --color-surface-4: #222222;

    --color-gold: #C9A84C;
    --color-gold-alt: #EDD07E;
    --color-gold-light: #EDD07E;
    --color-gold-dim: #8B6F2E;
    --color-gold-deep: #4A3510;
    --color-gold-shimmer: #F8EDCB;

    --color-text: #FAF7F0;
    --color-text-secondary: #9A9186;
    --color-text-tertiary: #827A70;
    --color-text-inverse: #080808;
    --color-disabled: #2A2A2A;

    --color-success: #3DD68C;
    --color-danger: #FF5C5C;
    --color-warning: #FFB347;
    --color-info: #6BA8FF;
    --color-success-tint: #0D4D2C;
    --color-danger-tint: #5C1A1A;

    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.55);
    --shadow-raised: 0 6px 24px rgba(0, 0, 0, 0.65);
    --shadow-gold: 0 6px 24px rgba(201, 168, 76, 0.20);
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-base);
  color: var(--color-text);
  background: var(--color-bg);
}

/* The display face carries titles and amounts. Upstream reserves italic for
   card section headers ("Aujourd'hui"), which is why .display--section exists
   rather than italicising every heading. */
h1,
h2,
h3,
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.display--section {
  font-style: italic;
  letter-spacing: 0.2px;
}

/* The uppercase gold micro-label above a section -- "RÉSUMÉ MENSUEL",
   "PROCHAINE ÉTAPE". It is the family's most recognisable typographic move. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
}

.chip {
  display: inline-block;
  border: 1px solid var(--color-surface-3);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--size-small);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.version-stamp {
  font-family: var(--font-body);
  font-size: var(--size-micro);
  letter-spacing: 0.6px;
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-surface-3);
  padding-top: var(--space-lg);
  margin-top: var(--space-2xl);
  text-align: center;
}