/* ===========================================================================
   acemate Design System — core tokens
   ---------------------------------------------------------------------------
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Import this file before any component CSS.
   =========================================================================== */

/* Webfonts — Inter for UI/display, JetBrains Mono for code surfaces.
   These are Google Fonts substitutions. Replace with local /fonts when the
   official faces are provided. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -------------------------------------------------------------------------
     Color — brand
     ------------------------------------------------------------------------- */
  --brand-50:  #EAF2FE;
  --brand-100: #CFE0FD;
  --brand-200: #9BBFFB;
  --brand-300: #5C97F7;
  --brand-400: #2575EF;
  --brand-500: #015DE4;   /* primary — pulled from logo + paperclip */
  --brand-600: #0149B4;   /* hover */
  --brand-700: #013889;
  --brand-800: #012966;
  --brand-900: #011A40;

  /* -------------------------------------------------------------------------
     Color — neutrals (warm-cool gray)
     ------------------------------------------------------------------------- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FAFAFB;
  --neutral-50:   #F5F6F8;
  --neutral-100:  #EEF0F3;
  --neutral-200:  #E5E7EB;
  --neutral-300:  #D1D5DB;
  --neutral-400:  #9CA3AF;
  --neutral-500:  #6B7280;
  --neutral-600:  #4B5563;
  --neutral-700:  #374151;
  --neutral-800:  #1F2430;
  --neutral-900:  #11151F;
  --neutral-1000: #0B0F19;

  /* -------------------------------------------------------------------------
     Color — semantic (desaturated, never neon)
     ------------------------------------------------------------------------- */
  --success-50:  #E8F6EE;
  --success-500: #1F9D55;
  --success-700: #157040;

  --warning-50:  #FFF6E5;
  --warning-500: #C77A0A;
  --warning-700: #8F560A;

  --danger-50:   #FCEBEC;
  --danger-500:  #D2363E;
  --danger-700:  #9A2128;

  --info-50:     #E6F1FF;
  --info-500:    #1F73E6;
  --info-700:    #1556AD;

  /* -------------------------------------------------------------------------
     Semantic surface tokens (light theme defaults)
     ------------------------------------------------------------------------- */
  --bg:          var(--neutral-25);
  --surface:     var(--neutral-0);
  --surface-2:   var(--neutral-50);
  --surface-3:   var(--neutral-100);
  --border:      var(--neutral-200);
  --border-strong: var(--neutral-300);

  --fg:          var(--neutral-1000);   /* primary text */
  --fg-1:        var(--neutral-700);    /* secondary text */
  --fg-2:        var(--neutral-500);    /* tertiary / placeholder */
  --fg-on-brand: var(--neutral-0);

  --accent:      var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-soft: var(--brand-50);

  /* -------------------------------------------------------------------------
     Type — families & weights
     ------------------------------------------------------------------------- */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* -------------------------------------------------------------------------
     Type — scale (rem-based, 16px root)
     ------------------------------------------------------------------------- */
  --text-2xs: 0.6875rem;   /* 11 — micro tags */
  --text-xs:  0.75rem;     /* 12 — caption */
  --text-sm:  0.8125rem;   /* 13 — meta */
  --text-base: 0.9375rem;  /* 15 — UI body */
  --text-md:  1rem;        /* 16 — long-form body */
  --text-lg:  1.125rem;    /* 18 — emphasized body */
  --text-xl:  1.25rem;     /* 20 — section subhead */
  --text-2xl: 1.5rem;      /* 24 — h3 */
  --text-3xl: 1.875rem;    /* 30 — h2 */
  --text-4xl: 2.25rem;     /* 36 — h1 / mobile hero */
  --text-5xl: 3rem;        /* 48 — display */
  --text-6xl: 3.5rem;      /* 56 — hero */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;   /* display */
  --tracking-snug:  -0.01em;   /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;   /* eyebrows / labels in CAPS */

  /* -------------------------------------------------------------------------
     Spacing scale (4-pt grid)
     ------------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* -------------------------------------------------------------------------
     Radius
     ------------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* inputs, chips */
  --radius-lg: 12px;    /* buttons, cards (default) */
  --radius-xl: 16px;    /* sheets, modals */
  --radius-2xl: 24px;   /* hero surfaces */
  --radius-pill: 999px; /* tags only */

  /* -------------------------------------------------------------------------
     Shadows (soft, two-tier)
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11,15,25,.04), 0 1px 1px rgba(11,15,25,.03);
  --shadow-md: 0 8px 24px rgba(11,15,25,.08), 0 2px 6px rgba(11,15,25,.04);
  --shadow-lg: 0 24px 56px rgba(11,15,25,.10), 0 4px 12px rgba(11,15,25,.06);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-500);

  /* -------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-med:    200ms;
  --dur-slow:   400ms;
}

/* ===========================================================================
   Dark theme overrides
   =========================================================================== */
[data-theme="dark"] {
  --bg:          var(--neutral-1000);
  --surface:     var(--neutral-900);
  --surface-2:   var(--neutral-800);
  --surface-3:   #2A2F3A;
  --border:      #1F2430;
  --border-strong: #2A2F3A;

  --fg:          #F3F4F6;
  --fg-1:        var(--neutral-300);
  --fg-2:        var(--neutral-400);
  --fg-on-brand: var(--neutral-0);

  --accent:      var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-soft: rgba(1,93,228,.18);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
}

/* ===========================================================================
   Base element styles — the "semantic" half of the system.
   Use the classes below or the bare element where it makes sense.
   =========================================================================== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--fg);
  margin: 0;
}
.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg);
  margin: 0;
}
.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg);
  margin: 0;
}
.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.p, p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  margin: 0;
}
.meta {
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.code, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  color: var(--fg);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--accent-soft); color: var(--fg); }