/* ============================================================
   MOVA DESIGN SYSTEM — Colors & Typography
   Font: Inter (local — fonts/Inter-*.ttf)
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BASE COLOR TOKENS
   ============================================================ */
:root {
  /* Brand Blue */
  --color-blue:        #1f7aec;
  --color-blue-dark:   #1664c4;
  --color-blue-light:  #e9f2ff;
  --color-blue-border: #c2d9f8;

  /* Surfaces */
  --color-bg:          #eef3f9;
  --color-white:       #ffffff;
  --color-card:        #ffffff;
  --color-chat-bg:     #f8fbff;

  /* Text */
  --color-text:        #102033;
  --color-text-2:      #6c7a8f;
  --color-text-inv:    #ffffff;

  /* Border */
  --color-border:      #d7e1ec;

  /* States */
  --color-success:     #22c55e;
  --color-success-bg:  #d1fae5;
  --color-success-text:#059669;
  --color-error:       #ef4444;
  --color-error-bg:    #fee2e2;
  --color-error-text:  #dc2626;
  --color-warning:     #f59e0b;
  --color-warning-bg:  #fef3c7;
  --color-warning-text:#b45309;
  --color-info:        #3b82f6;
  --color-info-bg:     #dbeafe;
  --color-info-text:   #1d4ed8;

  /* ============================================================
     NEUTRAL SCALE — cool greys tuned for the blue-grey page bg.
     Use these for layered surfaces, dividers, and disabled states.
     ============================================================ */
  --grey-50:  #f6f8fb;
  --grey-100: #eef3f9;   /* alias of --color-bg */
  --grey-200: #e3eaf3;
  --grey-300: #d7e1ec;   /* alias of --color-border */
  --grey-400: #b9c5d4;
  --grey-500: #8d9aae;
  --grey-600: #6c7a8f;   /* alias of --color-text-2 */
  --grey-700: #4d5a70;
  --grey-800: #2e3a4d;
  --grey-900: #102033;   /* alias of --color-text */

  /* Layered surfaces — use for nested cards / hover rows */
  --surface-1: #ffffff;        /* base card */
  --surface-2: #f6f8fb;         /* hover row, nested panel */
  --surface-3: #eef3f9;         /* deeper nest, code blocks */
  --surface-overlay: rgba(16, 32, 51, 0.48);  /* modal scrim */

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */

  /* Foreground */
  --fg1:               var(--color-text);        /* Primary text */
  --fg2:               var(--color-text-2);      /* Secondary/muted text */
  --fg-inv:            var(--color-text-inv);    /* Text on dark/blue bg */

  /* Backgrounds */
  --bg-page:           var(--color-bg);          /* Page background */
  --bg-card:           var(--color-card);        /* Card / panel surface */
  --bg-input:          var(--color-white);       /* Input fields */
  --bg-chat:           var(--color-chat-bg);     /* Chat conversation bg */
  --bg-accent:         var(--color-blue-light);  /* Tinted accent areas */

  /* Interactive */
  --interactive:       var(--color-blue);        /* Primary buttons, links, active icons */
  --interactive-hover: var(--color-blue-dark);   /* Hover state */
  --interactive-bg:    var(--color-blue-light);  /* Icon bg, badge bg */

  /* Borders */
  --border:            var(--color-border);      /* Default border */
  --border-focus:      var(--color-blue);        /* Focus ring */

  /* ============================================================
     SHADOWS — elevation scale (low → high)
     Use --shadow-* for ambient depth; --ring-* for focus halos.
     ============================================================ */
  --shadow-xs:   0 1px 2px rgba(17, 34, 68, 0.05);
  --shadow-sm:   0 4px 16px rgba(17, 34, 68, 0.06);
  --shadow-md:   0 10px 28px rgba(17, 34, 68, 0.08);
  --shadow:      0 18px 40px rgba(17, 34, 68, 0.08);
  --shadow-lg:   0 28px 60px rgba(17, 34, 68, 0.12);
  --shadow-xl:   0 40px 80px rgba(17, 34, 68, 0.16);
  --shadow-blue: 0 8px 24px rgba(31, 122, 236, 0.30);
  --shadow-inset:inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Focus rings — accessible, brand-tinted */
  --ring-focus:   0 0 0 3px rgba(31, 122, 236, 0.32);
  --ring-error:   0 0 0 3px rgba(239, 68, 68, 0.28);
  --ring-success: 0 0 0 3px rgba(34, 197, 94, 0.28);

  /* ============================================================
     CORNER RADII
     ============================================================ */
  --radius-xs:   10px;   /* Logo icon square */
  --radius-sm:   12px;   /* Icon backgrounds, small chips */
  --radius-md:   14px;   /* Buttons, feature cards */
  --radius-lg:   20px;   /* Section cards, step cards */
  --radius-xl:   24px;   /* Chat card, app panels */
  --radius-2xl:  28px;   /* CTA card */
  --radius-pill: 100px;  /* Pills, badges, status */
  --radius-full: 50%;    /* Avatars, send button */

  /* ============================================================
     SPACING
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-15: 60px;
  --space-20: 80px;

  /* Layout */
  --max-width:   1100px;  /* @kind spacing */
  --nav-height:  64px;  /* @kind spacing */

  /* ============================================================
     MOTION — durations + easings. Calm and purposeful, never bouncy.
     ============================================================ */
  --duration-instant: 80ms;    /* @kind other */ /* state flips: checkboxes, toggles */
  --duration-fast:    120ms;   /* @kind other */ /* hover, color */
  --duration-base:    200ms;   /* @kind other */ /* default UI transition */
  --duration-slow:    320ms;   /* @kind other */ /* dialogs, drawers */
  --duration-slower:  480ms;   /* @kind other */ /* page-level, entry sequences */
  --duration-entry:   600ms;   /* @kind other */ /* fade-up entry */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* @kind other */ /* default */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */ /* enter */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);       /* @kind other */ /* exit */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */ /* movement */
  --ease-soft:     cubic-bezier(0.3, 0, 0.2, 1);     /* @kind other */ /* card lift */

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-base:     0;     /* @kind other */
  --z-raised:   10;    /* @kind other */
  --z-sticky:   100;   /* @kind other */
  --z-dropdown: 1000;  /* @kind other */
  --z-overlay:  1500;  /* @kind other */
  --z-modal:    2000;  /* @kind other */
  --z-toast:    3000;  /* @kind other */
  --z-tooltip:  4000;  /* @kind other */
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* OpenType features for Inter — proportional default, tabular when needed */
  --feat-default: "cv11", "ss01", "ss03";   /* @kind font */ /* curved 'l', alt 'a/g', smart caps */
  --feat-tabular: "tnum", "lnum";             /* @kind font */ /* tabular lining numerals */

  /* Scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-body: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  38px;
  --text-5xl:  52px;

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 700;  /* Inter brand set ships only through Bold; aliased to 700 */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.15;
  --leading-normal: 1.5;
  --leading-relaxed:1.6;
  --leading-loose:  1.65;

  /* Letter spacing */
  --tracking-tight: -1.5px;
  --tracking-snug:  -1px;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.08em;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

/* Resets */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:  var(--font-sans);
  font-size:    var(--text-body);
  font-weight:  var(--weight-regular);
  line-height:  var(--leading-relaxed);
  color:        var(--fg1);
  background:   var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

/* Display */
.display {
  font-size:      var(--text-5xl);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--fg1);
}
.display-accent { color: var(--interactive); }

/* Headings */
h1, .h1 {
  font-size:      var(--text-5xl);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-size:      var(--text-4xl);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h3, .h3 {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-normal);
}
h4, .h4 {
  font-size:      var(--text-md);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-normal);
}

/* Body text */
p, .body { font-size: var(--text-body); line-height: var(--leading-relaxed); }
.body-lg  { font-size: var(--text-xl);  line-height: var(--leading-loose);   color: var(--fg2); }
.body-sm  { font-size: var(--text-base); line-height: var(--leading-relaxed);}

/* Labels */
.label {
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--interactive);
}
.caption {
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--fg2);
}
.timestamp {
  font-size:   var(--text-xs);
  font-weight: var(--weight-medium);
  color:       var(--fg2);
}

/* Utility */
.text-primary   { color: var(--fg1); }
.text-secondary { color: var(--fg2); }
.text-accent    { color: var(--interactive); }
.text-inv       { color: var(--fg-inv); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }

.font-regular   { font-weight: var(--weight-regular); }
.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); } /* alias of bold (700) */

/* Eyebrow — small caps label that sits above a heading */
.eyebrow {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--interactive);
  display:        inline-block;
  margin-bottom:  var(--space-3);
}

/* Mono — code, ids, key combos */
.mono, code, kbd {
  font-family:    var(--font-mono);
  font-size:      0.92em;
  font-feature-settings: "zero", "ss01";
}
code {
  background:     var(--surface-3);
  padding:        2px 6px;
  border-radius:  6px;
  color:          var(--fg1);
}
kbd {
  background:     var(--surface-1);
  border:         1px solid var(--border);
  border-bottom-width: 2px;
  padding:        2px 6px;
  border-radius:  6px;
  font-size:      0.82em;
  color:          var(--fg2);
  box-shadow:     var(--shadow-xs);
}

/* Tabular numerals — use on price, counts, timers, tables */
.tabular { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--feat-tabular); }

/* Focus visible — apply to interactive elements */
.focus-ring:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--border-focus);
}

/* Motion — reduced motion users get instant transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   DARK MODE — opt-in via [data-theme="dark"] on <html> or <body>.
   Inherits the whole semantic-token graph; nothing else needs to
   change in components that reference --bg-*, --fg-*, --border, etc.
   ============================================================ */
[data-theme="dark"] {
  /* Surfaces — deep blue-black, never pure black */
  --color-bg:          #0a1322;
  --color-white:       #111c2e;   /* base surface in dark */
  --color-card:        #15203a;
  --color-chat-bg:     #0e1828;

  /* Text */
  --color-text:        #eaf0fa;
  --color-text-2:      #94a3b8;
  --color-text-inv:    #0a1322;

  /* Border */
  --color-border:      #243352;

  /* Blue — slightly brighter for dark-bg contrast */
  --color-blue:        #4f93f0;
  --color-blue-dark:   #3a7fdb;
  --color-blue-light:  #1a2a4a;
  --color-blue-border: #2c4172;

  /* States — tuned for dark */
  --color-success-bg:  #0f2e1f;
  --color-success-text:#4ade80;
  --color-error-bg:    #2e1414;
  --color-error-text:  #f87171;
  --color-warning-bg:  #2a1f08;
  --color-warning-text:#fbbf24;
  --color-info-bg:     #0f1e3a;
  --color-info-text:   #60a5fa;

  /* Layered surfaces */
  --surface-1: #15203a;
  --surface-2: #1c2945;
  --surface-3: #0e1828;
  --surface-overlay: rgba(2, 6, 14, 0.72);

  /* Neutral scale — flipped */
  --grey-50:  #0a1322;
  --grey-100: #0e1828;
  --grey-200: #15203a;
  --grey-300: #243352;
  --grey-400: #3a4a6a;
  --grey-500: #6a7a96;
  --grey-600: #94a3b8;
  --grey-700: #b9c5d4;
  --grey-800: #d7e1ec;
  --grey-900: #eaf0fa;

  /* Shadows — darker, larger spread on dark bg */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:   0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 10px 28px rgba(0, 0, 0, 0.4);
  --shadow:      0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 28px 60px rgba(0, 0, 0, 0.55);
  --shadow-xl:   0 40px 80px rgba(0, 0, 0, 0.65);
  --shadow-blue: 0 8px 24px rgba(79, 147, 240, 0.40);

  --ring-focus:   0 0 0 3px rgba(79, 147, 240, 0.40);
}