/*
 * Manabi Future UI tokens — Phase 1
 *
 * New work must consume the --mf-* namespace.  The existing --navy/--blue
 * variables remain available only as a compatibility bridge while pages are
 * migrated out of style.css.
 */
@layer reset, tokens, base, components, layouts, pages, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    --mf-ink-950: #0d2038;
    --mf-ink-800: #17355f;
    --mf-blue-700: #2457dc;
    --mf-blue-600: #2f6bff;
    --mf-blue-500: #4a7cff;
    --mf-cyan-400: #57c7e8;
    --mf-orange-600: #df6714;
    --mf-orange-500: #f47c22;
    --mf-green-700: #0f745c;
    --mf-green-600: #16866a;
    --mf-red-700: #99231a;
    --mf-red-600: #b42318;

    --mf-surface-0: #ffffff;
    --mf-surface-1: #f7faff;
    --mf-surface-2: #edf4fc;
    --mf-surface-warm: #fffaf3;
    --mf-line: #d8e4f1;
    --mf-line-strong: #b8cce2;
    --mf-text-1: #142f4b;
    --mf-text-2: #536a82;
    --mf-text-inverse: #ffffff;

    --mf-success-soft: #eaf8f2;
    --mf-warning-soft: #fff7e8;
    --mf-danger-soft: #fff0ee;
    --mf-info-soft: #edf4ff;

    --mf-space-1: 4px;
    --mf-space-2: 8px;
    --mf-space-3: 12px;
    --mf-space-4: 16px;
    --mf-space-5: 20px;
    --mf-space-6: 24px;
    --mf-space-8: 32px;
    --mf-space-10: 40px;
    --mf-space-12: 48px;

    --mf-radius-sm: 12px;
    --mf-radius-md: 18px;
    --mf-radius-lg: 24px;
    --mf-radius-xl: 32px;
    --mf-radius-pill: 999px;

    --mf-shadow-1: 0 2px 10px rgba(20, 47, 75, .06);
    --mf-shadow-2: 0 14px 36px rgba(20, 47, 75, .10);
    --mf-shadow-focus: 0 18px 48px rgba(47, 107, 255, .18);
    --mf-focus-ring: 0 0 0 4px rgba(47, 107, 255, .22);

    --mf-content-wide: 1280px;
    --mf-content-reading: 780px;
    --mf-control-h: 48px;
    --mf-control-h-child: 56px;
    --mf-control-h-admin: 38px;

    --mf-ruby-size: .56em;
    --mf-ruby-gap: .18em;
    --mf-reading-leading: 1.88;
    --mf-child-leading: 1.78;
    --mf-admin-sidebar-w: 252px;
    --mf-layer-sticky: 420;
    --mf-layer-dock: 550;
    --mf-layer-dialog: 900;

    --mf-header-h: 76px;
    --mf-child-nav-h: 0px;
    --mf-mobile-nav-h: 0px;
    --mf-study-dock-h: 0px;
    --mf-sticky-gap: 10px;
    --mf-sticky-top: calc(var(--mf-header-h) + var(--mf-child-nav-h) + var(--mf-sticky-gap));
    --mf-fixed-clearance: calc(var(--mf-mobile-nav-h) + var(--mf-study-dock-h) + 24px + env(safe-area-inset-bottom));

    --mf-motion-fast: 160ms;
    --mf-motion-normal: 220ms;
    --mf-motion-slow: 360ms;
    --mf-ease: cubic-bezier(.2, .8, .2, 1);
  }

  :root[data-contrast="more"] {
    --mf-line: #9eb4cc;
    --mf-text-2: #334d68;
  }

  @media (max-width: 760px) {
    :root {
      --mf-header-h: 66px;
      --mf-sticky-gap: 6px;
    }
  }
}