/* ═══════════════════════════════════════════════════════════════
   VidaPay — legacy token COMPATIBILITY LAYER (decision 0013).
   The source of truth moved to md3-tokens.css (Material Design 3
   roles seeded from the brand hue). Every legacy token below now
   aliases an MD3 role so existing screens re-skin without edits;
   this whole alias block is DELETED when the per-screen migration
   finishes. Structural tokens (type sizes, spacing, radius, touch,
   icons, z-index) keep their values — they already coincide with
   the MD3 scale. Decision 0003.1's palette and the borders-only
   elevation rule are superseded; RTL rules, the 14px body floor,
   44px targets and focus visibility are unchanged and permanent.
   ═══════════════════════════════════════════════════════════════ */
@import url('md3-tokens.css');

:root {

  /* ── 1. BRAND (constants — the MD3 seeds) ─────────────────── */
  --brand-navy:        #051E36;
  --brand-citrus:      #DAE343;

  /* ── 2. SURFACES → MD3 surface roles ──────────────────────── */
  --surface-app:       var(--md-sys-color-surface);
  --surface-card:      var(--md-sys-color-surface-container-lowest);
  --surface-sunken:    var(--md-sys-color-surface-container);
  --surface-chrome:    var(--md-sys-color-surface-container-lowest);
  --surface-raised:    var(--md-sys-color-surface-container-high);
  --surface-info:      var(--md-ext-info-container);
  --surface-success:   var(--md-ext-success-container);
  --surface-warn:      var(--md-ext-warn-container);
  --surface-error:     var(--md-sys-color-error-container);
  --surface-accent:    var(--md-sys-color-secondary-container);

  /* ── 3. TEXT → MD3 on-* roles ─────────────────────────────── */
  --text-primary:      var(--md-sys-color-on-surface);
  --text-secondary:    var(--md-sys-color-on-surface-variant);
  --text-kicker:       var(--md-sys-color-secondary);
  --text-link:         var(--md-ext-info-text);
  --text-disabled:     color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  --text-on-accent:    #0D1B2E;   /* on citrus — citrus is constant */
  --text-on-brand:     #FFFFFF;   /* on navy — navy is constant     */

  /* ── 4. STATE → MD3 extended roles ────────────────────────── */
  --success-text:      var(--md-ext-success-text);
  --success-fill:      var(--md-ext-success-fill);
  --warn-text:         var(--md-ext-warn-text);
  --warn-fill:         var(--md-ext-warn-fill);
  --error-text:        var(--md-sys-color-error);
  --error-fill:        var(--md-ext-error-fill);
  --info-text:         var(--md-ext-info-text);
  --info-fill:         var(--md-ext-info-fill);
  --disabled-fill:     var(--md-sys-color-surface-container);

  /* ── 5. BORDERS → MD3 outline roles ───────────────────────── */
  --border-subtle:     var(--md-sys-color-outline-variant);
  --border-control:    var(--md-sys-color-outline);
  --border-focus:      var(--md-ext-info-text);
  --border-accent:     var(--brand-citrus);

  --border-w-hairline: 1px;
  --border-w-control:  1.5px;
  --border-w-emphasis: 2px;
  --border-w-accent:   3px;

  /* ── 6. ELEVATION — border shorthands kept for outlined
         variants; MD3 shadow levels live in md3-tokens.css ───── */
  --elev-0:            none;
  --elev-1:            var(--border-w-hairline) solid var(--border-subtle);
  --elev-2:            var(--border-w-control)  solid var(--border-control);
  --elev-3:            var(--border-w-emphasis) solid var(--border-focus);
  --shadow-none:       none;

  /* ── 7. TYPE (values coincide with the MD3 scale) ─────────── */
  --font-latin:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
  --font-arabic: 'Cairo', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI',
                 Tahoma, sans-serif;
  --font-numeric: var(--font-latin);   /* Western digits everywhere */
  --font-icon:   'tabler-icons';

  --fs-kicker:   var(--md-sys-typescale-label-small-size);   /* 11px */
  --fs-label:    var(--md-sys-typescale-label-medium-size);  /* 12px */
  --fs-body:     var(--md-sys-typescale-body-medium-size);   /* 14px FLOOR */
  --fs-lead:     var(--md-sys-typescale-body-large-size);    /* 16px */
  --fs-h2:       clamp(1.125rem, 1rem + 0.7vw, 1.375rem);    /* 18–22px */
  --fs-h1:       clamp(1.5rem, 1.3rem + 1.2vw, 1.875rem);    /* 24–30px */

  --lh-tight:    1.2;
  --lh-snug:     1.3;
  --lh-body:     1.45;
  --lh-loose:    1.7;

  --fw-regular:  var(--md-sys-typescale-weight-regular);
  --fw-medium:   var(--md-sys-typescale-weight-medium);
  --fw-bold:     var(--md-sys-typescale-weight-bold);
  --fw-black:    900;

  --tracking-kicker: 0.2em;
  --tracking-label:  0.08em;
  --tracking-normal: 0;

  /* ── 8. SPACING ───────────────────────────────────────────── */
  --space-1:     0.25rem;
  --space-2:     0.5rem;
  --space-3:     0.75rem;
  --space-4:     1rem;
  --space-6:     1.5rem;
  --space-8:     2rem;
  --space-screen-x: var(--space-3);

  /* ── 9. RADIUS → MD3 shape scale (same values) ────────────── */
  --radius-none:   var(--md-sys-shape-corner-none);
  --radius-sm:     var(--md-sys-shape-corner-small);
  --radius-md:     var(--md-sys-shape-corner-medium);
  --radius-lg:     var(--md-sys-shape-corner-large);
  --radius-pill:   var(--md-sys-shape-corner-full);
  --radius-circle: 50%;

  /* ── 10. TOUCH ────────────────────────────────────────────── */
  --target-min:     44px;
  --target-comfort: 48px;
  --target-gap:     var(--space-2);

  /* ── 11. ICONS ────────────────────────────────────────────── */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;

  /* ── 12. MOTION → MD3 durations/easings ───────────────────── */
  --motion-fast:   var(--md-sys-motion-duration-short2);  /* 100ms */
  --motion-base:   var(--md-sys-motion-duration-short3);  /* 150ms */
  --motion-slow:   var(--md-sys-motion-duration-short4);  /* 200ms */
  --motion-enter:  var(--md-sys-motion-duration-short4);  /* 200ms */
  --ease-standard: var(--md-sys-motion-easing-standard);
  --ease-out:      var(--md-sys-motion-easing-standard-decelerate);

  /* ── 13. Z-INDEX ──────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   20;
  --z-rail:     30;
  --z-dropdown: 40;
  --z-overlay:  50;
  --z-sheet:    60;
  --z-toast:    70;
  --z-modal:    80;

  /* ── 14. PARTNER MARKS — exempt from the palette ──────────── */
  --partner-mtn-bg:  #FFD700;
  --partner-mtn-fg:  #007AB8;
  --partner-sham-bg: #E8F0E8;

  /* Primary action = MD3 primary (navy light / citrus dark —
     the brand inversion is built into the schemes). */
  --button-primary-bg:   var(--md-sys-color-primary);
  --button-primary-text: var(--md-sys-color-on-primary);
}

/* ═══════════════════════════════════════════════════════════════
   DARK — the MD3 dark scheme in md3-tokens.css flips every role;
   only the aliases whose ROLE (not value) differs per scheme
   live here. A partial dark theme is still a bug.
   ═══════════════════════════════════════════════════════════════ */
.theme-dark {
  --surface-card:    var(--md-sys-color-surface-container);       /* cards float lighter in dark */
  --surface-chrome:  var(--md-sys-color-surface-container-low);
  --surface-raised:  var(--md-sys-color-surface-container-high);
  --text-kicker:     var(--md-sys-color-primary);                 /* citrus kickers in dark */
  --surface-accent:  color-mix(in srgb, var(--brand-citrus) 20%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL BASE (permanent — survives the alias layer's deletion)
   ═══════════════════════════════════════════════════════════════ */
html { font-size: 100%; }        /* never px-lock the root */

body {
  font-family: var(--font-latin);
  font-size:   var(--fs-body);   /* the 14px floor */
  line-height: var(--lh-body);
  color:       var(--text-primary);
  background:  var(--surface-app);
  -webkit-font-smoothing: antialiased;
}

/* ── Arabic: direction-driven, not class-driven ─────────────── */
[dir="rtl"], [dir="rtl"] * { font-family: var(--font-arabic); }

[dir="rtl"] {
  letter-spacing: 0 !important;  /* tracking breaks Arabic letter joins */
  line-height: 1.7;
}
[dir="rtl"] .kicker {
  font-size: var(--fs-label);    /* 11 -> 12px: no uppercase in Arabic */
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}
[dir="rtl"] .label { line-height: 1.6; }
[dir="rtl"] .lead  { line-height: 1.55; }
[dir="rtl"] .h2    { line-height: 1.5; }
[dir="rtl"] .h1    { line-height: 1.4; }

/* Numbers never reorder, in either language */
.num, [dir="ltr"] { direction: ltr; unicode-bidi: isolate;
                    font-family: var(--font-numeric); }

/* Directional glyphs mirror; others must not */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* ── Touch targets: one rule retires most of the failures ───── */
button, a[role="button"], [role="tab"], [role="radio"], select,
input[type="checkbox"], input[type="radio"],
.nav-item, .pill, .filter-chip, .back, .menu-btn, .btn-ghost {
  min-height: var(--target-min);
  min-width:  var(--target-min);
}

/* ── Focus must always be visible ───────────────────────────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--border-w-emphasis) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ── Safe areas ─────────────────────────────────────────────── */
.appbar { padding-top:    max(var(--space-2), env(safe-area-inset-top)); }
.tabbar { padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); }
.screen { padding-inline: max(var(--space-3),
                              env(safe-area-inset-left),
                              env(safe-area-inset-right)); }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}