/* ════════════════════════════════════════════════════════════════════════════
   EDITORIAL ATLAS — Antemate edition, web.

   SINGLE SOURCE OF TRUTH for the website's look, and a 1:1 port of the native
   tokens in mobile/lib/theme/tokens.dart (AmColors / AmRadii / AmSpace /
   AmShadow / AmMotion). Change one side and you MUST mirror the other in the
   same commit — CI fails the build on drift. A drifting palette is exactly the
   bug this file exists to prevent.

   The system is shared with Yanvara: a warm sand canvas, deep navy for weight,
   editorial type (large tight-tracked display headings with small wide-tracked
   uppercase eyebrows), and one calm spring for all motion.

   Two deliberate divergences from Yanvara, both semantic — see docs/DESIGN.md:

     1. GREEN LEADS, GOLD IS RESERVED. In Yanvara gold is the jewel on the key
        action. Here green leads and gold is the rarer accent (Pro, and a group
        reaching zero), because "green = positive" is load-bearing on every
        screen of a money app and a gold CTA beside a green balance blunts both.

     2. MONEY IS A STATE, NOT AN ERROR. --ea-you-owe is CLAY, never the error
        red. Owing someone money is an ordinary state of a healthy group;
        rendering it as an alarm makes a working app feel broken and
        desensitises the reader to the colour that must mean "this cannot be
        undone". If this is ever "fixed" to red, it is a regression.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette (identical to Yanvara) ──────────────────────────────── */
  --ea-navy: #0b1623;
  --ea-navy-2: #0f1e30;
  --ea-navy-deep: #080e17;
  --ea-navy-top: #12253a;      /* gradient partner for --ea-navy */

  --ea-sand: #e8e1d6;
  --ea-sand-soft: #f4f0eb;
  --ea-warm: #f7f3ed;
  --ea-canvas: #f6f5f1;
  --ea-surface: #ffffff;

  --ea-ink: #0e1720;
  /* Both muteds are a step darker than the brand grey they started as, and
     the difference is measured rather than chosen: #7a8288 is 3.58:1 on the
     canvas and #9aa1a6 is 2.40:1, below the 4.5:1 floor for normal text and
     the 3:1 floor for a glyph respectively. Pinned by the app's
     contrast_test.dart, and mirrored here because the two must not drift. */
  --ea-muted: #6a7176;
  --ea-muted-2: #898f93;
  /* Web-only, and now a smaller gap than it was: --ea-muted already clears AA,
     and this remains the darker step for long paragraphs of body copy. */
  --ea-muted-ink: #5a6270;

  --ea-line: rgba(14, 23, 32, .08);
  --ea-line-strong: rgba(14, 23, 32, .14);
  --ea-line-on-dark: rgba(255, 255, 255, .14);

  /* ── Green leads: structure, primary actions, settled/positive ────────── */
  --ea-green: #4e6b59;
  --ea-green-2: #4d7a63;
  --ea-green-deep: #33543f;
  --ea-green-soft: #e8efe8;
  --ea-on-green: #ffffff;

  /* ── Gold is reserved: Pro, and celebratory moments only ──────────────── */
  --ea-gold: #c9ad72;
  --ea-gold-hi: #e0c894;
  --ea-gold-deep: #b2934f;
  --ea-on-gold: #22190a;
  /* Web-only. Gold as TEXT on the light canvas: gold-deep lands at 2.9:1, under
     the 3:1 large-text floor, so text accents use this deeper step (3.4:1).
     Backgrounds and jewels keep --ea-gold / --ea-gold-deep. */
  --ea-gold-ink: #a8863f;

  /* Web-only. Green as a LINK, which is the one place the site puts green
     text at body size. --ea-green-2 measures 4.4981:1 on the canvas — under
     the 4.5:1 floor by a rounding error, which is still under it — and 3.71:1
     on the dark canvas, which is not close. These are the measured steps:
     7.76:1 and 8.02:1. The fill colours are unchanged; only text moves. */
  --ea-link: #33543f;
  --ea-link-on-dark: #86b79a;

  /* ── Money semantics — the most important new tokens in the system ────── */
  /* Each is a TEXT colour and each is a step darker than the fill it is named
     after: a fill carries ink on top of it and only has to be distinguishable,
     while text has to be READ. As green-2, clay and gold-deep these were
     4.19:1 on their own chip, 4.41:1 on the canvas and 2.68:1 respectively.
     The fills are unchanged. */
  --ea-owed-to-you: #49735e;       /* you are owed */
  --ea-you-owe: #ac5339;           /* you owe — CLAY, never the error red */
  --ea-settled: #6a7176;           /* zero, nothing to do */
  --ea-pending: #836c3a;           /* queued offline, not yet synced */
  --ea-owed-to-you-soft: #e8efe8;
  --ea-you-owe-soft: #fbeee9;
  /* Web-only darker steps for these as TEXT on the light canvas (AA body). */
  --ea-owed-to-you-ink: #3d6350;
  --ea-you-owe-ink: #9a4630;

  /* ── Dark mode ─────────────────────────────────────────────────────────
     Declared as ordinary tokens here so the app's tokens.dart and this file
     stay 1:1 and the parity test can compare them. The media query at the
     foot of this block is what actually applies them.

     Not an inversion. The navy surfaces are already dark and do not change;
     what changes is the canvas and the ink on it. The money semantics get
     their own values because the light ones fall below 4.5:1 on a dark
     canvas — the same measurement the app pins in contrast_test.dart. */
  --ea-dark-canvas: #10161c;
  --ea-dark-surface: #181f27;
  --ea-dark-surface-high: #212a34;  /* sheets, menus, dialogs */
  --ea-dark-ink: #eceff1;
  --ea-dark-muted: #9aa4ac;
  --ea-dark-muted-2: #79838b;
  --ea-dark-line: rgba(236, 239, 241, .12);

  --ea-dark-owed-to-you: #7fc69e;
  --ea-dark-you-owe: #e08e72;        /* still CLAY, never the error red */
  --ea-dark-settled: #9aa4ac;
  --ea-dark-pending: #d9bc82;
  --ea-dark-owed-to-you-soft: #1c2c24;
  --ea-dark-you-owe-soft: #2e211c;

  --ea-dark-green-soft: #1c2c24;
  --ea-dark-gold: #e0c894;           /* gold as TEXT on a dark canvas */
  --ea-dark-grabber: #39434c;

  /* Web-only ROLE token: a panel raised off the canvas.
   *
   * The site used --ea-sand-soft directly, and that is the whole shape of the
   * dark-mode bug this exists to prevent: --ea-ink is remapped for dark and
   * --ea-sand-soft is NOT (it cannot be — it is also the INK on every navy
   * surface, so remapping it would blank the footer and the store badges).
   * The panel therefore stayed near-white while the text on it went near-
   * white: 1.02:1, measured. A background and the ink on it have to move
   * together, which means naming the ROLE rather than reaching for a colour. */
  --ea-panel: var(--ea-sand-soft);

  /* ── Errors / destructive actions ONLY. Never a balance. ──────────────── */
  --ea-error: #b42d2d;
  --ea-error-soft: #fdf3f3;
  --ea-error-on-dark: #e8a0a0;

  /* ── Categorical palette for charts and category chips ────────────────── */
  --ea-cat-1: #4d7a63;  /* food & dining */
  --ea-cat-2: #2f5b7a;  /* transport */
  --ea-cat-3: #b2934f;  /* stays */
  --ea-cat-4: #8a5a7a;  /* activities */
  --ea-cat-5: #3f7d78;  /* groceries */
  --ea-cat-6: #b4573c;  /* shopping */
  --ea-cat-7: #6b6f86;  /* utilities */
  --ea-cat-8: #7a8288;  /* other */

  /* ── Radii (AmRadii) ──────────────────────────────────────────────────── */
  --ea-r-sm: 14px;
  --ea-r-md: 18px;
  --ea-r-lg: 22px;
  --ea-r-xl: 28px;
  --ea-r-2xl: 34px;   /* web-only: full-bleed editorial panels */
  --ea-r-pill: 999px;

  /* ── Media shapes ─────────────────────────────────────────────────────
     Editorial photography is cut to a soft organic silhouette rather than a
     plain rectangle. An image and the sand "plate" behind it must ALWAYS use
     the same token, or the two read as unrelated blobs. */
  --ea-shape-arch: 46% 46% 42% 42% / 40% 40% 20% 20%;
  --ea-shape-organic: 44% 20% 40% 18% / 22% 28% 32% 38%;

  /* ── Space (AmSpace) ──────────────────────────────────────────────────── */
  --ea-s-xs: 6px;
  --ea-s-s: 12px;
  --ea-s-m: 18px;
  --ea-s-l: 24px;
  --ea-s-xl: 34px;

  /* ── Elevation (AmShadow) ─────────────────────────────────────────────── */
  --ea-shadow-card: 0 18px 40px -22px rgba(16, 32, 48, .34);
  --ea-shadow-float: 0 20px 44px -14px rgba(16, 32, 48, .19);
  --ea-shadow-lift: 0 30px 70px -30px rgba(16, 32, 48, .3);
  --ea-shadow-green: 0 14px 30px -8px rgba(77, 122, 99, .55);
  --ea-shadow-gold: 0 14px 30px -8px rgba(201, 173, 114, .55);
  --ea-shadow-navy: 0 16px 34px -14px rgba(11, 22, 35, .45);

  /* ── Motion (AmMotion) — one spring across the whole product ──────────── */
  --ea-t-fast: 220ms;
  --ea-t-base: 380ms;
  --ea-t-slow: 620ms;
  --ea-spring: cubic-bezier(.22, 1, .36, 1);
  --ea-emphasized: cubic-bezier(.2, 0, 0, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --ea-container: 1240px;
  --ea-gutter: clamp(16px, 4vw, 48px);
  --ea-section-y: clamp(56px, 8vw, 104px);

  /* ── Editorial type ladder (AmType, scaled for the larger canvas) ─────── */
  --ea-fs-display: clamp(40px, 5.6vw, 70px);
  --ea-fs-h1: clamp(32px, 4.4vw, 54px);
  --ea-fs-h2: clamp(26px, 3.2vw, 42px);
  --ea-fs-h3: clamp(20px, 2.2vw, 27px);
  --ea-fs-title: 17px;
  --ea-fs-body: 16px;
  --ea-fs-small: 14px;
  --ea-fs-micro: 12.5px;
  --ea-fs-label: 11.5px;

  /* Display sits tight; body sits open. The contrast IS the editorial feel. */
  --ea-tracking-display: -.045em;
  --ea-tracking-tight: -.03em;
  --ea-tracking-label: .21em;

  /* Tabular figures for every money value. A column of balances that shifts
     horizontally as digits change reads as broken, and this is a product made
     almost entirely of columns of numbers. */
  --ea-font-numeric: "Satoshi", "SF Pro Text", "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
}

/* Apply the dark tokens.
 *
 * `prefers-color-scheme` follows the device, exactly as the app's
 * `ThemeMode.system` does; `[data-theme="dark"]` lets a page force it for a
 * screenshot or a preview. The app is the primary surface here — the website
 * is marketing — so the values live with the app's and the web simply
 * consumes them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ea-canvas: var(--ea-dark-canvas);
    --ea-surface: var(--ea-dark-surface);
    --ea-ink: var(--ea-dark-ink);
    --ea-muted: var(--ea-dark-muted);
    --ea-muted-ink: var(--ea-dark-muted);
    --ea-muted-2: var(--ea-dark-muted-2);
    --ea-line: var(--ea-dark-line);

    --ea-owed-to-you: var(--ea-dark-owed-to-you);
    --ea-owed-to-you-ink: var(--ea-dark-owed-to-you);
    --ea-you-owe: var(--ea-dark-you-owe);
    --ea-you-owe-ink: var(--ea-dark-you-owe);
    --ea-settled: var(--ea-dark-settled);
    --ea-pending: var(--ea-dark-pending);
    --ea-owed-to-you-soft: var(--ea-dark-owed-to-you-soft);
    --ea-you-owe-soft: var(--ea-dark-you-owe-soft);

    --ea-green-soft: var(--ea-dark-green-soft);
    --ea-gold-ink: var(--ea-dark-gold);
    --ea-error: var(--ea-error-on-dark);

    --ea-panel: var(--ea-dark-surface);
    --ea-link: var(--ea-link-on-dark);
  }
}

:root[data-theme="dark"] {
  --ea-canvas: var(--ea-dark-canvas);
  --ea-surface: var(--ea-dark-surface);
  --ea-ink: var(--ea-dark-ink);
  --ea-muted: var(--ea-dark-muted);
  --ea-muted-ink: var(--ea-dark-muted);
  --ea-muted-2: var(--ea-dark-muted-2);
  --ea-line: var(--ea-dark-line);

  --ea-owed-to-you: var(--ea-dark-owed-to-you);
  --ea-owed-to-you-ink: var(--ea-dark-owed-to-you);
  --ea-you-owe: var(--ea-dark-you-owe);
  --ea-you-owe-ink: var(--ea-dark-you-owe);
  --ea-settled: var(--ea-dark-settled);
  --ea-pending: var(--ea-dark-pending);
  --ea-owed-to-you-soft: var(--ea-dark-owed-to-you-soft);
  --ea-you-owe-soft: var(--ea-dark-you-owe-soft);

  --ea-green-soft: var(--ea-dark-green-soft);
  --ea-gold-ink: var(--ea-dark-gold);
  --ea-error: var(--ea-error-on-dark);

  --ea-panel: var(--ea-dark-surface);
  --ea-link: var(--ea-link-on-dark);
}

/* Money figures are ALWAYS tabular. Apply to any element rendering an amount. */
.ea-amount {
  font-family: var(--ea-font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--ea-tracking-tight);
}

.ea-amount--owed { color: var(--ea-owed-to-you-ink); }
.ea-amount--owe { color: var(--ea-you-owe-ink); }
.ea-amount--settled { color: var(--ea-settled); }
.ea-amount--pending { color: var(--ea-pending); }