/* aidafi design system — tokens.css (DRAFT, not for deploy)
   Colours, radii, type scale aligned to Ava's 0.6.5 Android tokens
   (/workspace/ui-team/android/spec.md); see android-diff.md.
   Brand: lowercase 'aidafi', blue-box 'aida' logo #016FD0. */
:root {
  /* brand */
  --aida-blue: #016FD0;
  --aida-blue-dark: #0158A8;   /* pressed */
  --aida-blue-deep: #003A8C;
  --aida-blue-soft: #EAF2FC;   /* = Ava brand.subtle */
  /* navy (web hero/overview only) */
  --navy: #0B1F44;
  --navy-deep: #00175A;
  /* ink / text (= Ava) */
  --ink: #0A1A33;
  --muted: #4A5872;
  --faint: #8A95A8;
  --on-navy: #FFFFFF;
  --on-navy-muted: #B9C6E6;
  /* surfaces (= Ava) */
  --surface: #FFFFFF;
  --bg: #F6F7F9;               /* = Ava surface.alt */
  --card: #FFFFFF;
  --line: #E6E9EF;
  /* status (= Ava) */
  --ok: #0E7A4F;      --ok-bg: #E7F5EE;
  --warn: #B54708;    --warn-bg: #FFF4E5;   /* warn fg added, diff #1 */
  --danger: #B42318;  --danger-bg: #FDECEA;
  --focus-ring: rgba(1,111,208,.35);
  /* 'In review' status (brand/info, never warning red) */
  --status-review: #003A8C; --status-review-bg: #EAF2FC; --status-review-border: #C9DDF5;
  /* type */
  --font: Inter, "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  /* role scale (= Ava) */
  --fs-caption: 12px; --fs-body-s: 14px; --fs-body: 16px; --fs-heading: 18px;
  --fs-title: 24px; --fs-display: 64px;
  /* web-only extra steps (diff #4) */
  --fs-xl: 20px; --fs-3xl: 30px; --fs-hero: 40px;
  --ls-display: -2px; --ls-caption: 0.6px;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5;
  /* spacing — 8-pt grid, 4 for text gaps (= Ava) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px;
  --sp-web-12: 12px; --sp-web-20: 20px;   /* dashboard parity, diff #3 */
  /* radius (= Ava, +24 sheets) */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  /* touch targets */
  --touch-min: 48px; --cta-height: 56px; --keypad-key: 64px;
  /* elevation */
  --shadow-sm: 0 1px 2px rgba(11,27,63,.06);
  --shadow-md: 0 4px 16px rgba(11,27,63,.08);
  --shadow-lg: 0 12px 24px rgba(11,27,63,.10);
  --shadow-navy: 0 8px 24px rgba(11,27,63,.25);
}

/* ========================================================================
   COMPONENT CLASSES (draft) — stepper, 'In review' status, skeleton loader.
   Kept here per request; could later move to a components.css.
   ======================================================================== */

/* --- Onboarding progress stepper (numbered; done/current/upcoming) --- */
.aida-stepper{display:flex;align-items:flex-start;gap:0;list-style:none;margin:0;padding:0;counter-reset:step}
.aida-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-width:72px;color:var(--muted);font:var(--fw-medium) var(--fs-body-s)/1.3 var(--font)}
.aida-step__dot{width:32px;height:32px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font:var(--fw-semibold) var(--fs-body-s)/1 var(--font);background:var(--card);border:2px solid var(--line);color:var(--muted);z-index:1}
.aida-step__label{margin-top:var(--sp-2);max-width:12ch}
/* connector line between dots */
.aida-step:not(:first-child)::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
/* states */
.aida-step.is-done .aida-step__dot{background:var(--aida-blue);border-color:var(--aida-blue);color:#fff}
.aida-step.is-done:not(:first-child)::before{background:var(--aida-blue)}
.aida-step.is-done{color:var(--ink)}
.aida-step.is-current .aida-step__dot{background:var(--status-review-bg);border-color:var(--aida-blue);color:var(--aida-blue)}
.aida-step.is-current{color:var(--aida-blue);font-weight:var(--fw-semibold)}
.aida-step.is-upcoming .aida-step__dot{background:var(--card);border-color:var(--line);color:var(--faint)}
/* vertical modifier (use explicitly, or auto on phones via the media query below) */
.aida-stepper--vertical{flex-direction:column;align-items:stretch}
.aida-stepper--vertical .aida-step{flex-direction:row;align-items:center;gap:var(--sp-3);text-align:left;min-width:0;padding:var(--sp-2) 0}
.aida-stepper--vertical .aida-step__label{margin-top:0;max-width:none}
.aida-stepper--vertical .aida-step:not(:first-child)::before{top:-50%;left:15px;width:2px;height:100%}
@media (max-width:520px){
  .aida-stepper{flex-direction:column;align-items:stretch}
  .aida-step{flex-direction:row;align-items:center;gap:var(--sp-3);text-align:left;min-width:0;padding:var(--sp-2) 0}
  .aida-step__label{margin-top:0;max-width:none}
  .aida-step:not(:first-child)::before{top:-50%;left:15px;width:2px;height:100%}
}

/* --- Status badge family: base .aida-badge + is-review / is-ok / is-off (brand/info, success, neutral) --- */
.aida-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:4px 10px;font:var(--fw-semibold) var(--fs-caption)/1 var(--font)}
.aida-badge.is-review{background:var(--status-review-bg);color:var(--status-review)}
.aida-badge.is-review::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--aida-blue)}
.aida-badge.is-ok{background:var(--ok-bg);color:var(--ok)}
.aida-badge.is-off{background:var(--bg);color:var(--muted)}
/* alias: keep Leo's .aida-badge-review working (= .aida-badge.is-review) */
.aida-badge-review{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:4px 10px;font:var(--fw-semibold) var(--fs-caption)/1 var(--font);background:var(--status-review-bg);color:var(--status-review)}
.aida-badge-review::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--aida-blue)}

/* --- Banner family: base .aida-banner + is-review / is-ok --- */
.aida-banner{display:flex;gap:var(--sp-3);align-items:flex-start;border:1px solid var(--line);background:var(--card);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-3)}
.aida-banner b{display:block;color:var(--ink);font-size:var(--fs-body-s)}
.aida-banner span{color:var(--muted);font-size:var(--fs-body-s)}
.aida-banner .aida-badge,.aida-banner .aida-badge-review{flex:none;margin-left:auto}
.aida-banner.is-review{background:var(--status-review-bg);border-color:var(--status-review-border)}
.aida-banner.is-ok{background:var(--ok-bg);border-color:#A6E3C4}
.aida-banner.is-off{background:var(--bg);border-color:var(--line)}  /* neutral/blocked: no red, no blue */
.aida-banner.is-off b{color:var(--ink)}.aida-banner.is-off span{color:var(--muted)}
/* page variant: full-screen banner layout (matches Leo's onboarding banner); works with is-off/is-review/is-ok */
.aida-banner--page{flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);margin-bottom:var(--sp-6)}
.aida-banner--page h1{font-size:var(--fs-xl);line-height:var(--lh-tight);margin:0;color:var(--ink)}
.aida-banner--page p{margin:0;color:var(--muted)}
.aida-banner--page .aida-badge,.aida-banner--page .aida-badge-review{align-self:flex-start;margin-left:0}

/* aliases: keep Leo's .aida-banner-review / .aida-banner-ok working */
.aida-banner-review{display:flex;gap:var(--sp-3);align-items:flex-start;border:1px solid var(--status-review-border);background:var(--status-review-bg);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-3)}
.aida-banner-review b{display:block;color:var(--ink);font-size:var(--fs-body-s)}
.aida-banner-review span{color:var(--muted);font-size:var(--fs-body-s)}
.aida-banner-review .aida-badge-review,.aida-banner-review .aida-badge{flex:none;margin-left:auto}
.aida-banner-ok{display:flex;gap:var(--sp-3);align-items:flex-start;border:1px solid #A6E3C4;background:var(--ok-bg);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-3)}
.aida-banner-ok b{display:block;color:var(--ink);font-size:var(--fs-body-s)}
.aida-banner-ok span{color:var(--muted);font-size:var(--fs-body-s)}

/* --- Skeleton loading (base .skeleton + BEM modifiers; shimmer respects prefers-reduced-motion) --- */
.skeleton{position:relative;overflow:hidden;background:var(--line);border-radius:var(--radius-sm);display:block}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:skeleton-shimmer 1.4s ease-in-out infinite}
@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .skeleton::after{animation:none}
  .skeleton{animation:skeleton-pulse 1.6s ease-in-out infinite}
}
@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.6}}
/* line + width helpers */
.skeleton--line{height:14px;margin:6px 0}
.skeleton--line.sm{height:12px}
.skeleton--w90{width:90%}.skeleton--w70{width:70%}.skeleton--w50{width:50%}.skeleton--w40{width:40%}
.skeleton--dot{width:24px;height:24px;border-radius:var(--radius-pill);flex:none}
.skeleton--pill{width:72px;height:20px;border-radius:var(--radius-pill);flex:none}
/* Fixed-size placeholders matching real components (prevent layout shift) */
.skeleton--money-card{height:150px;border-radius:var(--radius-lg)}        /* navy money/balance card */
.skeleton--tile{height:96px;border-radius:var(--radius-lg)}               /* overview tile */
.skeleton--row{display:flex;align-items:center;gap:var(--sp-3);height:40px}/* status checklist row */
.skeleton--field{height:44px;margin-bottom:var(--sp-5)}  /* input-height placeholder (matches .f input/.aida-input) */
/* Payout-history row: Arrival | (id) | Status | (payments) | Amount */
.skeleton--payout-row{display:flex;align-items:center;gap:var(--sp-3);height:48px;border-bottom:1px solid var(--line)}
.skeleton--payout-row .skeleton{height:14px}
.skeleton--payout-row .pr-date{width:96px;flex:none}
.skeleton--payout-row .pr-id{width:80px;flex:none}
.skeleton--payout-row .pr-pay{width:40px;flex:none;margin-left:auto}
.skeleton--payout-row .pr-amt{width:72px;flex:none}
@media (max-width:520px){.skeleton--payout-row .pr-id,.skeleton--payout-row .pr-pay{display:none}}
/* layout wrappers (no shimmer) */
.skeleton-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.skeleton-checklist{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-3);background:var(--card)}

/* --- Money amount (tabular-nums; 64 → 40 → 30 step-down) --- */
.aida-amount{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:var(--fw-semibold);letter-spacing:var(--ls-display);line-height:1;white-space:nowrap;color:var(--ink)}
/* give the amount's wrapper a query context: <div class="aida-amount-box"> */
.aida-amount-box{container-type:inline-size}
/* display size + container-query step-down (fits on narrow/folded screens) */
.aida-amount--display{font-size:var(--fs-display)}           /* 64px */
@container (max-width:300px){.aida-amount--display{font-size:var(--fs-hero)}}   /* 40px */
@container (max-width:210px){.aida-amount--display{font-size:var(--fs-3xl)}}    /* 30px */
/* fallback where container queries are unsupported: fluid clamp, floor 30px */
@supports not (container-type:inline-size){
  .aida-amount--display{font-size:clamp(30px,13cqi,64px);font-size:clamp(30px,13vw,64px)}
}
/* explicit step modifiers for a JS measure-and-fit fallback (toggle these) */
.aida-amount--40{font-size:var(--fs-hero)}   /* 40px */
.aida-amount--30{font-size:var(--fs-3xl)}    /* 30px, minimum */
.aida-amount__cur{font-weight:var(--fw-semibold);font-size:.45em;vertical-align:.08em;margin-right:.08em}

/* r86: Leo additions (dashboard/onboarding), Nora values win all shared names */
:root{--aida-blue-tint:#E6F0FB;--fs-2xl:24px;--fs-4xl:40px;--fs-base:14px;--fs-lg:18px;--fs-md:16px;--fs-sm:13px;--fs-xs:12px;--line-soft:#EDF0F5;--ls-eyebrow:0.06em;--ls-tight:-0.02em;--sp-7:24px;--sp-8:32px;--sp-9:48px;}