/* ============================================================
   MtAir — Design Tokens (ported from the MtAir Design System)
   Warm, airy, light-first design system for MedipalTech Air.
   ------------------------------------------------------------
   Single source of truth. Every component reads from here.
   Fonts are NOT loaded here — see `fonts.css` for the branded
   Plus Jakarta Sans / Fira Code faces. The --mta-font-* chains
   below degrade to system-ui when that file is not imported.
   ============================================================ */

/* ---------- COLOR ----------
   Warm, natural palette: health clarity, air, simplicity. */
:root {
  /* ── Green (Primary brand — forest green) ──────────────────── */
  --mta-green-50:   #EFF7F2;
  --mta-green-100:  #D4EADE;
  --mta-green-200:  #A8D5BE;
  --mta-green-300:  #75BE9C;
  --mta-green-400:  #46A579;
  --mta-green-500:  #298D60;
  --mta-green-600:  #1E6E48; /* ← brand primary */
  --mta-green-700:  #155337;
  --mta-green-800:  #0D3924;
  --mta-green-900:  #062113;

  /* ── Amber (Warm accent — copper/honey) ────────────────────── */
  --mta-amber-50:   #FFF8EE;
  --mta-amber-100:  #FEECD3;
  --mta-amber-200:  #FDD5A6;
  --mta-amber-300:  #FBB869;
  --mta-amber-400:  #F89935;
  --mta-amber-500:  #E87D1A;
  --mta-amber-600:  #CA681E; /* ← warm CTA / text highlights */
  --mta-amber-700:  #A55118;
  --mta-amber-800:  #823C11;
  --mta-amber-900:  #5C270B;

  /* ── Neutral (Warm gray — cream undertone) ─────────────────── */
  --mta-neutral-0:   #FFFFFF;
  --mta-neutral-50:  #FAF9F7;
  --mta-neutral-100: #F3F0EB;
  --mta-neutral-200: #E9E5DD;
  --mta-neutral-300: #D4CFC9;
  --mta-neutral-400: #B3AFA7;
  --mta-neutral-500: #908C83;
  --mta-neutral-600: #6B6760;
  --mta-neutral-700: #47433D;
  --mta-neutral-800: #2C2A24;
  --mta-neutral-900: #181610;

  /* ── Dark (Hero / panel backgrounds) ──────────────────────── */
  --mta-dark-50:  #2C2920;
  --mta-dark-100: #201E17;
  --mta-dark-200: #171510;
  --mta-dark-300: #0F0D09;

  /* ── Dark-theme surface scale (warm charcoal — never pitch black) ─ */
  --mta-surface-dark-0:  #1C1B15; /* page — deep warm charcoal, "airy" */
  --mta-surface-dark-1:  #24221A; /* card */
  --mta-surface-dark-2:  #2C2A20; /* raised / popover */
  --mta-surface-dark-3:  #353227; /* muted fill */
  --mta-surface-dark-hover:  #322F25; /* row / item hover */
  --mta-surface-dark-border:        #38352B;
  --mta-surface-dark-border-strong: #4A4639;

  /* ── Red (Error / danger) ──────────────────────────────────── */
  --mta-red-50:   #FFF2F1;
  --mta-red-100:  #FFE2DF;
  --mta-red-200:  #FFBFBB;
  --mta-red-500:  #DC3B2F;
  --mta-red-600:  #B82920;
  --mta-red-700:  #951E16;
  --mta-red-900:  #4A0A06;
}

/* ── Semantic tokens ───────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg:              var(--mta-neutral-100);
  --color-bg-page:         var(--mta-neutral-100);
  --color-bg-card:         var(--mta-neutral-0);
  --color-bg-subtle:       var(--mta-neutral-50);
  --color-bg-muted:        var(--mta-neutral-200);
  --color-bg-dark:         var(--mta-dark-100);
  --color-bg-overlay:      rgba(24, 22, 16, 0.40);

  /* Surfaces */
  --color-surface:         var(--mta-neutral-0);
  --color-surface-raised:  var(--mta-neutral-50);

  /* Filled controls (secondary buttons, chips, default tags/badges) */
  --color-control:         var(--mta-neutral-100);
  --color-control-hover:   var(--mta-neutral-200);

  /* Text */
  --color-text-primary:    var(--mta-neutral-900);
  --color-text-secondary:  var(--mta-neutral-600);
  --color-text-muted:      var(--mta-neutral-500);
  --color-text-disabled:   var(--mta-neutral-400);
  --color-text-inverse:    var(--mta-neutral-0);
  --color-text-on-primary: var(--mta-neutral-0);

  /* Borders */
  --color-border:          var(--mta-neutral-200);
  --color-border-strong:   var(--mta-neutral-300);
  --color-border-subtle:   var(--mta-neutral-100);
  --color-border-focus:    var(--mta-green-600);

  /* Accent — green */
  --color-accent:          var(--mta-green-600);
  --color-accent-hover:    var(--mta-green-700);
  --color-accent-active:   var(--mta-green-800);
  --color-accent-subtle:   var(--mta-green-50);
  --color-accent-muted:    var(--mta-green-100);
  --color-accent-text:     var(--mta-green-700);

  /* Warm — amber */
  --color-warm:            var(--mta-amber-600);
  --color-warm-hover:      var(--mta-amber-700);
  --color-warm-subtle:     var(--mta-amber-50);
  --color-warm-text:       var(--mta-amber-700);

  /* Status */
  --color-success:         var(--mta-green-600);
  --color-success-bg:      var(--mta-green-50);
  --color-success-border:  var(--mta-green-200);
  --color-success-text:    var(--mta-green-700);

  --color-warning:         var(--mta-amber-500);
  --color-warning-bg:      var(--mta-amber-50);
  --color-warning-border:  var(--mta-amber-200);
  --color-warning-text:    var(--mta-amber-700);

  --color-error:           var(--mta-red-500);
  --color-error-bg:        var(--mta-red-50);
  --color-error-border:    var(--mta-red-200);
  --color-error-text:      var(--mta-red-600);
}

/* ── Dark theme ────────────────────────────────────────────────────
 * Background is a deep WARM charcoal — never pitch black — to keep
 * the brand's airy, natural feel. Activated by [data-theme="dark"]
 * (set by ThemeProvider) — .dark / .dark-theme included for drop-in
 * compatibility with @radix-ui/themes.
 * ─────────────────────────────────────────────────────────────────── */
.dark,
.dark-theme,
[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --color-bg:              var(--mta-surface-dark-0);
  --color-bg-page:         var(--mta-surface-dark-0);
  --color-bg-card:         var(--mta-surface-dark-1);
  --color-bg-subtle:       var(--mta-surface-dark-2);
  --color-bg-muted:        var(--mta-surface-dark-3);
  --color-bg-dark:         #14130E;
  --color-bg-overlay:      rgba(8, 7, 4, 0.62);

  /* Surfaces */
  --color-surface:         var(--mta-surface-dark-1);
  --color-surface-raised:  var(--mta-surface-dark-2);

  /* Filled controls */
  --color-control:         var(--mta-surface-dark-2);
  --color-control-hover:   var(--mta-surface-dark-3);

  /* Text */
  --color-text-primary:    var(--mta-neutral-100);
  --color-text-secondary:  var(--mta-neutral-400);
  --color-text-muted:      var(--mta-neutral-500);
  --color-text-disabled:   var(--mta-neutral-600);
  --color-text-inverse:    var(--mta-neutral-900);
  --color-text-on-primary: #ffffff;

  /* Borders */
  --color-border:          var(--mta-surface-dark-border);
  --color-border-strong:   var(--mta-surface-dark-border-strong);
  --color-border-subtle:   #2A2820;
  --color-border-focus:    var(--mta-green-400);

  /* Accent — green (lifted for legibility on dark) */
  --color-accent:          var(--mta-green-500);
  --color-accent-hover:    var(--mta-green-400);
  --color-accent-active:   var(--mta-green-300);
  --color-accent-subtle:   rgba(70, 165, 121, 0.14);
  --color-accent-muted:    rgba(70, 165, 121, 0.24);
  --color-accent-text:     var(--mta-green-300);

  /* Warm — amber */
  --color-warm:            var(--mta-amber-500);
  --color-warm-hover:      var(--mta-amber-400);
  --color-warm-subtle:     rgba(248, 153, 53, 0.14);
  --color-warm-text:       var(--mta-amber-300);

  /* Status */
  --color-success:         var(--mta-green-400);
  --color-success-bg:      rgba(70, 165, 121, 0.14);
  --color-success-border:  rgba(70, 165, 121, 0.34);
  --color-success-text:    var(--mta-green-300);

  --color-warning:         var(--mta-amber-400);
  --color-warning-bg:      rgba(248, 153, 53, 0.14);
  --color-warning-border:  rgba(248, 153, 53, 0.32);
  --color-warning-text:    var(--mta-amber-300);

  --color-error:           var(--mta-red-500);
  --color-error-bg:        rgba(220, 59, 47, 0.15);
  --color-error-border:    rgba(220, 59, 47, 0.36);
  --color-error-text:      #FF9A90;

  /* Shadows — deeper & cooler against dark surfaces */
  --mta-shadow-xs:     0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --mta-shadow-sm:     0 1px 3px 0 rgba(0, 0, 0, 0.46),
                       0 1px 2px -1px rgba(0, 0, 0, 0.40);
  --mta-shadow-md:     0 4px 8px -1px rgba(0, 0, 0, 0.50),
                       0 2px 4px -2px rgba(0, 0, 0, 0.42);
  --mta-shadow-lg:     0 10px 20px -3px rgba(0, 0, 0, 0.55),
                       0 4px 8px -4px rgba(0, 0, 0, 0.46);
  --mta-shadow-xl:     0 20px 32px -5px rgba(0, 0, 0, 0.60),
                       0 8px 14px -6px rgba(0, 0, 0, 0.50);
  --mta-shadow-modal:  0 32px 64px -12px rgba(0, 0, 0, 0.70),
                       0 12px 24px -8px rgba(0, 0, 0, 0.55);

  /* Focus rings — brighter green on dark */
  --mta-focus-ring:    0 0 0 3px rgba(70, 165, 121, 0.40);
}

/* ---------- TYPOGRAPHY ----------
   Typeface: Plus Jakarta Sans (variable, 200–800 weight). */
:root {
  /* Font families */
  --mta-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Fira Code — self-hosted (weights 300–700), see fonts.css */
  --mta-font-mono: 'Fira Code', 'SF Mono', 'Cascadia Code', ui-monospace, monospace;

  /* Font sizes */
  --mta-font-size-xs:   11px;
  --mta-font-size-sm:   13px;
  --mta-font-size-base: 14px;
  --mta-font-size-md:   16px;
  --mta-font-size-lg:   18px;
  --mta-font-size-xl:   20px;
  --mta-font-size-2xl:  24px;
  --mta-font-size-3xl:  30px;
  --mta-font-size-4xl:  38px;
  --mta-font-size-5xl:  48px;
  --mta-font-size-6xl:  60px;

  /* Font weights */
  --mta-font-weight-light:     300;
  --mta-font-weight-regular:   400;
  --mta-font-weight-medium:    500;
  --mta-font-weight-semibold:  600;
  --mta-font-weight-bold:      700;
  --mta-font-weight-extrabold: 800;

  /* Line heights */
  --mta-line-height-none:    1;
  --mta-line-height-tight:   1.2;
  --mta-line-height-snug:    1.35;
  --mta-line-height-normal:  1.5;
  --mta-line-height-relaxed: 1.65;
  --mta-line-height-loose:   1.8;

  /* Letter spacing */
  --mta-tracking-tighter: -0.03em;
  --mta-tracking-tight:   -0.02em;
  --mta-tracking-snug:    -0.01em;
  --mta-tracking-normal:   0em;
  --mta-tracking-wide:     0.02em;
  --mta-tracking-wider:    0.06em;
  --mta-tracking-widest:   0.12em;

  /* ── Semantic type styles ──────────────────────────────────── */
  --mta-text-display-size:    var(--mta-font-size-5xl);
  --mta-text-display-weight:  var(--mta-font-weight-bold);
  --mta-text-display-leading: var(--mta-line-height-tight);
  --mta-text-display-tracking: var(--mta-tracking-tighter);

  --mta-text-h1-size:    var(--mta-font-size-4xl);
  --mta-text-h1-weight:  var(--mta-font-weight-bold);
  --mta-text-h1-leading: var(--mta-line-height-tight);
  --mta-text-h1-tracking: var(--mta-tracking-tight);

  --mta-text-h2-size:    var(--mta-font-size-3xl);
  --mta-text-h2-weight:  var(--mta-font-weight-semibold);
  --mta-text-h2-leading: var(--mta-line-height-snug);
  --mta-text-h2-tracking: var(--mta-tracking-tight);

  --mta-text-h3-size:    var(--mta-font-size-2xl);
  --mta-text-h3-weight:  var(--mta-font-weight-semibold);
  --mta-text-h3-leading: var(--mta-line-height-snug);
  --mta-text-h3-tracking: var(--mta-tracking-snug);

  --mta-text-h4-size:    var(--mta-font-size-xl);
  --mta-text-h4-weight:  var(--mta-font-weight-semibold);
  --mta-text-h4-leading: var(--mta-line-height-snug);
  --mta-text-h4-tracking: var(--mta-tracking-snug);

  --mta-text-body-lg-size:    var(--mta-font-size-md);
  --mta-text-body-lg-weight:  var(--mta-font-weight-regular);
  --mta-text-body-lg-leading: var(--mta-line-height-relaxed);

  --mta-text-body-size:    var(--mta-font-size-base);
  --mta-text-body-weight:  var(--mta-font-weight-regular);
  --mta-text-body-leading: var(--mta-line-height-normal);

  --mta-text-body-sm-size:    var(--mta-font-size-sm);
  --mta-text-body-sm-weight:  var(--mta-font-weight-regular);
  --mta-text-body-sm-leading: var(--mta-line-height-normal);

  --mta-text-label-size:    var(--mta-font-size-sm);
  --mta-text-label-weight:  var(--mta-font-weight-medium);
  --mta-text-label-leading: var(--mta-line-height-none);

  --mta-text-label-sm-size:    var(--mta-font-size-xs);
  --mta-text-label-sm-weight:  var(--mta-font-weight-medium);
  --mta-text-label-sm-tracking: var(--mta-tracking-wide);

  --mta-text-caption-size:    var(--mta-font-size-xs);
  --mta-text-caption-weight:  var(--mta-font-weight-regular);
  --mta-text-caption-leading: var(--mta-line-height-normal);
}

/* ---------- SPACING + SIZING ----------
   Base unit: 4px. */
:root {
  --mta-space-px:  1px;
  --mta-space-0:   0px;
  --mta-space-0-5: 2px;
  --mta-space-1:   4px;
  --mta-space-1-5: 6px;
  --mta-space-2:   8px;
  --mta-space-2-5: 10px;
  --mta-space-3:   12px;
  --mta-space-3-5: 14px;
  --mta-space-4:   16px;
  --mta-space-5:   20px;
  --mta-space-6:   24px;
  --mta-space-7:   28px;
  --mta-space-8:   32px;
  --mta-space-9:   36px;
  --mta-space-10:  40px;
  --mta-space-11:  44px;
  --mta-space-12:  48px;
  --mta-space-14:  56px;
  --mta-space-16:  64px;
  --mta-space-20:  80px;
  --mta-space-24:  96px;
  --mta-space-28:  112px;
  --mta-space-32:  128px;

  /* ── Border radius ─────────────────────────────────────────── */
  --mta-radius-none: 0px;
  --mta-radius-xs:   3px;  /* tags, badges */
  --mta-radius-sm:   5px;  /* small inputs, chips */
  --mta-radius-md:   8px;  /* inputs, buttons, code */
  --mta-radius-lg:   12px; /* cards, dropdowns */
  --mta-radius-xl:   16px; /* modals, panels */
  --mta-radius-2xl:  20px; /* large cards */
  --mta-radius-3xl:  28px; /* hero cards */
  --mta-radius-full: 9999px; /* pills, avatars, toggles */

  /* ── Layout constants ──────────────────────────────────────── */
  --mta-sidebar-width:     240px;
  --mta-topbar-height:     56px;
  --mta-max-content-width: 760px;
  --mta-max-page-width:    1280px;

  /* ── Control sizing (compact, global) ─────────────────────── */
  --ctl-font:     var(--mta-font-size-base);
  --ctl-pad-y:    9px;
  --ctl-pad-x:    var(--mta-space-4);
  --field-pad-y:  var(--mta-space-2);
  --field-pad-x:  var(--mta-space-3);
  --switch-w:     36px;
  --switch-h:     20px;
  --switch-knob:  16px;
  --switch-gap:   2px;
  --seg-pad-y:    var(--mta-space-1);
  --stepper-h:    30px;
}

/* ---------- EFFECTS ----------
   Shadows, transitions, blur — warm-tinted, minimal, airy. */
:root {
  /* ── Shadows (warm-tinted: hsl(42 30% 6%)) ────────────────── */
  --mta-shadow-none:   none;
  --mta-shadow-xs:     0 1px 2px 0 rgba(24, 20, 12, 0.05);
  --mta-shadow-sm:     0 1px 3px 0 rgba(24, 20, 12, 0.07),
                       0 1px 2px -1px rgba(24, 20, 12, 0.05);
  --mta-shadow-md:     0 4px 8px -1px rgba(24, 20, 12, 0.08),
                       0 2px 4px -2px rgba(24, 20, 12, 0.05);
  --mta-shadow-lg:     0 10px 20px -3px rgba(24, 20, 12, 0.09),
                       0 4px 8px -4px rgba(24, 20, 12, 0.06);
  --mta-shadow-xl:     0 20px 32px -5px rgba(24, 20, 12, 0.10),
                       0 8px 14px -6px rgba(24, 20, 12, 0.07);
  --mta-shadow-modal:  0 32px 64px -12px rgba(24, 20, 12, 0.22),
                       0 12px 24px -8px rgba(24, 20, 12, 0.12);

  /* ── Focus rings ───────────────────────────────────────────── */
  --mta-focus-ring:        0 0 0 3px rgba(30, 110, 72, 0.28);
  --mta-focus-ring-amber:  0 0 0 3px rgba(202, 104, 30, 0.28);
  --mta-focus-ring-error:  0 0 0 3px rgba(220, 59, 47, 0.28);

  /* ── Transitions ───────────────────────────────────────────── */
  --mta-duration-instant:  50ms;
  --mta-duration-fast:     100ms;
  --mta-duration-normal:   150ms;
  --mta-duration-slow:     250ms;
  --mta-duration-slower:   400ms;
  --mta-duration-slowest:  600ms;

  --mta-ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --mta-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --mta-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --mta-ease-inout:   cubic-bezier(0.4, 0, 0.2, 1);
  --mta-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shorthand */
  --mta-transition-color:     color var(--mta-duration-normal) var(--mta-ease-default),
                               background-color var(--mta-duration-normal) var(--mta-ease-default),
                               border-color var(--mta-duration-normal) var(--mta-ease-default);
  --mta-transition-transform: transform var(--mta-duration-fast) var(--mta-ease-default);
  --mta-transition-shadow:    box-shadow var(--mta-duration-normal) var(--mta-ease-default);
  --mta-transition-opacity:   opacity var(--mta-duration-normal) var(--mta-ease-default);
  --mta-transition-all:       all var(--mta-duration-normal) var(--mta-ease-default);

  /* ── Backdrop blur ─────────────────────────────────────────── */
  --mta-blur-sm: 4px;
  --mta-blur-md: 12px;
  --mta-blur-lg: 24px;
  --mta-blur-xl: 40px;

  /* ── Z-index scale ─────────────────────────────────────────── */
  --mta-z-base:    0;
  --mta-z-raised:  10;
  --mta-z-sticky:  100;
  --mta-z-overlay: 200;
  --mta-z-modal:   300;
  --mta-z-toast:   400;
  --mta-z-tooltip: 500;
}

/* ============================================================
   COMPATIBILITY BRIDGE
   Legacy variable names used by components.css recipes that
   haven't been individually re-styled to the MtAir tokens above
   yet. As each component's CSS is rewritten, its references to
   these legacy names should be dropped in favor of the --mta-*
   and --color-* tokens directly, and this bridge trimmed.
   ============================================================ */
:root {
  /* Type */
  --font-sans:    var(--mta-font-sans);
  --font-display: var(--mta-font-sans);
  --font-mono:    var(--mta-font-mono);

  --text-xs:   var(--mta-font-size-xs);
  --text-sm:   var(--mta-font-size-sm);
  --text-base: var(--mta-font-size-base);
  --text-md:   var(--mta-font-size-md);
  --text-lg:   var(--mta-font-size-lg);
  --text-xl:   var(--mta-font-size-xl);
  --text-2xl:  var(--mta-font-size-2xl);
  --text-3xl:  var(--mta-font-size-3xl);
  --text-4xl:  var(--mta-font-size-4xl);
  --text-5xl:  var(--mta-font-size-5xl);

  --w-light:    var(--mta-font-weight-light);
  --w-regular:  var(--mta-font-weight-regular);
  --w-medium:   var(--mta-font-weight-medium);
  --w-semibold: var(--mta-font-weight-semibold);
  --w-bold:     var(--mta-font-weight-bold);
  --w-black:    var(--mta-font-weight-extrabold);

  --lh-tight:   var(--mta-line-height-tight);
  --lh-snug:    var(--mta-line-height-snug);
  --lh-normal:  var(--mta-line-height-normal);
  --lh-relaxed: var(--mta-line-height-relaxed);
  --track-tight: var(--mta-tracking-tight);
  --track-snug:  var(--mta-tracking-snug);
  --track-wide:  var(--mta-tracking-wide);
  --track-caps:  var(--mta-tracking-widest);

  /* Radii */
  --r-xs:   var(--mta-radius-xs);
  --r-sm:   var(--mta-radius-sm);
  --r-md:   var(--mta-radius-md);
  --r-lg:   var(--mta-radius-lg);
  --r-xl:   var(--mta-radius-xl);
  --r-pill: var(--mta-radius-full);

  /* Spacing 1:1 — both scales are 4px-based with matching steps */
  --space-1:  var(--mta-space-1);
  --space-2:  var(--mta-space-2);
  --space-3:  var(--mta-space-3);
  --space-4:  var(--mta-space-4);
  --space-5:  var(--mta-space-5);
  --space-6:  var(--mta-space-6);
  --space-8:  var(--mta-space-8);
  --space-10: var(--mta-space-10);
  --space-12: var(--mta-space-12);
  --space-16: var(--mta-space-16);

  /* Surfaces, text, borders */
  --ink:        var(--color-bg-page);
  --ink-deep:   var(--color-bg);
  --ink-raised: var(--color-bg-card);
  --steel-900:  var(--color-bg-card);
  --steel-800:  var(--color-control);
  --steel-700:  var(--color-control-hover);
  --steel-600:  var(--color-border-strong);
  --steel-500:  var(--color-border);
  --steel-400:  var(--color-text-disabled);

  --fg-1: var(--color-text-primary);
  --fg-2: var(--color-text-secondary);
  --fg-3: var(--color-text-muted);
  --fg-on-lime:  var(--color-text-on-primary);
  --fg-on-ember: #ffffff;

  --hair:        var(--color-border);
  --hair-strong: var(--color-border-strong);
  --edge-top:    rgba(255, 255, 255, 0.6);
  --edge-inset:  var(--color-border);

  /* Brand accents — green (lime) / red (ember) */
  --lime:        var(--color-accent);
  --lime-bright: var(--mta-green-400);
  --lime-deep:   var(--color-accent-hover);
  --lime-ink:    var(--color-text-on-primary);

  --ember:        var(--color-error);
  --ember-bright: var(--mta-red-500);
  --ember-deep:   var(--mta-red-700);

  /* Status */
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger:  var(--color-error);
  --info:    var(--color-accent);
  --success-bg: var(--color-success-bg);
  --warning-bg: var(--color-warning-bg);
  --danger-bg:  var(--color-error-bg);
  --info-bg:    var(--color-accent-subtle);

  /* Shadows */
  --shadow-raised:       var(--mta-shadow-sm);
  --shadow-raised-hover: var(--mta-shadow-md);
  --shadow-pressed:      inset 0 1px 2px rgba(24, 20, 12, 0.10);
  --shadow-inset-well:   inset 0 1px 2px rgba(24, 20, 12, 0.08);
  --shadow-card:         var(--mta-shadow-sm);
  --shadow-window:       var(--mta-shadow-modal);
  --focus-ring:       var(--mta-focus-ring);
  --focus-ring-ember: var(--mta-focus-ring-error);
  --glow-lime:        0 0 0 0 transparent;

  /* Flat "gradients" — MtAir uses flat fills, no gloss */
  --grad-key:          var(--color-control);
  --grad-key-hover:    var(--color-control-hover);
  --grad-key-down:     var(--color-control-hover);
  --grad-primary:      var(--color-accent);
  --grad-primary-down: var(--color-accent-active);
  --grad-ember:        var(--color-error);
  --grad-ember-down:   var(--mta-red-700);
  --grad-titlebar:     var(--color-bg-subtle);

  /* Motion */
  --dur-press: var(--mta-duration-instant);
  --dur-quick: var(--mta-duration-fast);
  --dur-base:  var(--mta-duration-normal);
  --ease-out:  var(--mta-ease-out);
  --ease-snap: var(--mta-ease-spring);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.mta-felt {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}
.mta-display {
  font-family: var(--mta-font-sans);
  font-weight: var(--mta-text-display-weight);
  font-size: var(--mta-text-display-size);
  line-height: var(--mta-text-display-leading);
  letter-spacing: var(--mta-text-display-tracking);
  color: var(--color-text-primary);
}
.mta-h1 {
  font-family: var(--mta-font-sans);
  font-weight: var(--mta-text-h1-weight);
  font-size: var(--mta-text-h1-size);
  line-height: var(--mta-text-h1-leading);
  letter-spacing: var(--mta-text-h1-tracking);
  color: var(--color-text-primary);
}
.mta-h2 {
  font-family: var(--mta-font-sans);
  font-weight: var(--mta-text-h2-weight);
  font-size: var(--mta-text-h2-size);
  line-height: var(--mta-text-h2-leading);
  letter-spacing: var(--mta-text-h2-tracking);
  color: var(--color-text-primary);
}
.mta-h3 {
  font-family: var(--mta-font-sans);
  font-weight: var(--mta-text-h3-weight);
  font-size: var(--mta-text-h3-size);
  line-height: var(--mta-text-h3-leading);
  letter-spacing: var(--mta-text-h3-tracking);
  color: var(--color-text-primary);
}
.mta-body {
  font-family: var(--mta-font-sans);
  font-weight: var(--mta-text-body-weight);
  font-size: var(--mta-text-body-size);
  line-height: var(--mta-text-body-leading);
  color: var(--color-text-secondary);
}
.mta-body-strong {
  font-weight: var(--mta-font-weight-medium);
  color: var(--color-text-primary);
}
.mta-caption {
  font-family: var(--mta-font-sans);
  font-weight: var(--mta-text-caption-weight);
  font-size: var(--mta-text-caption-size);
  color: var(--color-text-muted);
}
.mta-label {
  font-family: var(--mta-font-sans);
  font-weight: var(--mta-text-label-sm-weight);
  font-size: var(--mta-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--mta-tracking-widest);
  color: var(--color-text-muted);
}
.mta-mono {
  font-family: var(--mta-font-mono);
  font-weight: var(--mta-font-weight-regular);
  font-size: var(--mta-text-body-sm-size);
  color: var(--color-text-secondary);
}
