/* ──────────────────────────────────────────────────────────────────────────
   Flexam Design System — canonical tokens
   See README.md for context. Tokens follow the DESIGN.md model
   (HSL layering, border-defined depth, weight-restrained type) reskinned
   to Flexam's actual brand: indigo + electric blue, light-paper default.
   ────────────────────────────────────────────────────────────────────────── */

/* Self-hosted fonts (GDPR-compliant, no external requests) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --brand-indigo:   #18139c;   /* logo "X" left stroke — deepest brand */
  --brand-blue:     #3426fe;   /* logo "X" right stroke — primary accent */
  --brand-blue-link: #2419e0;  /* slightly darker for AA contrast on white */
  --brand-blue-30:  rgba(52, 38, 254, 0.30);  /* accent borders, focus rings */
  --brand-blue-12:  rgba(52, 38, 254, 0.12);  /* hover wash */
  --brand-blue-06:  rgba(52, 38, 254, 0.06);  /* subtle highlight */

  /* Tertiary — toolpath visualization purple, data-viz only */
  --viz-purple:     #7c3aed;
  --viz-magenta:    #c026d3;

  /* ── Neutral scale (light) ─────────────────────────────────────────────── */
  --paper:          #fafafa;
  --white:          #ffffff;
  --gray-50:        #f5f5f5;
  --gray-100:       #efefef;
  --gray-200:       #e5e5e5;
  --gray-300:       #d4d4d4;
  --gray-400:       #a3a3a3;
  --gray-500:       #737373;
  --gray-600:       #525252;
  --gray-700:       #404040;
  --gray-800:       #262626;
  --gray-900:       #171717;
  --ink:            #0a0a0a;

  /* ── Neutral scale (dark — for dark mode / app surfaces) ───────────────── */
  --dark-bg:        #171717;   /* page canvas dark */
  --dark-surface:   #1f1f1f;   /* one step lighter — cards on dark */
  --dark-deepest:   #0f0f0f;   /* primary button background dark */
  --dark-border-1:  #242424;   /* subtle divider */
  --dark-border-2:  #2e2e2e;   /* standard border */
  --dark-border-3:  #363636;   /* prominent / hover border */
  --dark-text-1:    #fafafa;
  --dark-text-2:    #b4b4b4;
  --dark-text-3:    #898989;

  /* ── Semantic foreground (light surface defaults) ─────────────────────── */
  --fg-1:           var(--ink);          /* primary text */
  --fg-2:           var(--gray-600);     /* secondary text */
  --fg-3:           var(--gray-500);     /* muted / metadata */
  --fg-disabled:    var(--gray-400);

  /* ── Semantic background (light surface defaults) ─────────────────────── */
  --bg-1:           var(--paper);        /* page canvas */
  --bg-2:           var(--white);        /* card background */
  --bg-3:           var(--gray-50);      /* subtle inset */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-bold:    var(--gray-400);
  --border-brand:   var(--brand-blue-30);

  /* ── Semantic state colors ────────────────────────────────────────────── */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-danger:   #dc2626;
  --color-info:     var(--brand-blue);

  /* ── Type families ────────────────────────────────────────────────────── */
  --font-sans:      'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:      'JetBrains Mono', 'Source Code Pro', Menlo, monospace;

  /* ── Type scale (DESIGN.md "Hierarchy" table) ─────────────────────────── */
  --t-display-size: 4.5rem;     /* 72px */
  --t-display-lh:   1.00;
  --t-display-w:    400;

  --t-h1-size:      2.25rem;    /* 36px */
  --t-h1-lh:        1.25;
  --t-h1-w:         400;

  --t-h2-size:      1.5rem;     /* 24px */
  --t-h2-lh:        1.33;
  --t-h2-w:         400;
  --t-h2-tracking:  -0.16px;

  --t-h3-size:      1.125rem;   /* 18px */
  --t-h3-lh:        1.56;
  --t-h3-w:         400;

  --t-body-size:    1rem;       /* 16px */
  --t-body-lh:      1.50;
  --t-body-w:       400;

  --t-caption-size: 0.875rem;   /* 14px */
  --t-caption-lh:   1.43;
  --t-caption-w:    400;

  --t-button-size:  0.875rem;
  --t-button-lh:    1.14;
  --t-button-w:     500;

  --t-small-size:   0.75rem;    /* 12px */
  --t-small-lh:     1.33;

  --t-mono-size:    0.75rem;    /* code label */
  --t-mono-tracking: 1.2px;

  /* ── Spacing scale (8px base) ─────────────────────────────────────────── */
  --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-22: 90px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius-sm:   6px;    /* secondary buttons, badges */
  --radius-md:   8px;    /* inputs, tabs */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   16px;   /* feature cards, image containers */
  --radius-pill: 9999px; /* primary CTAs, indicator dots */

  /* ── Shadows (sparing — borders carry depth) ──────────────────────────── */
  --shadow-none:    none;
  --shadow-focus:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-menu:    0 8px 24px rgba(0, 0, 0, 0.10);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 80ms;
  --duration-base: 150ms;
  --duration-slow: 300ms;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --content-max:   1200px;
  --gutter-mobile: 24px;
  --gutter-desk:   48px;
  --nav-height:    64px;
}

/* ── Dark surface override — apply to a wrapper or <html data-theme="dark"> */
[data-theme='dark'],
.theme-dark {
  --fg-1:          var(--dark-text-1);
  --fg-2:          var(--dark-text-2);
  --fg-3:          var(--dark-text-3);
  --bg-1:          var(--dark-bg);
  --bg-2:          var(--dark-surface);
  --bg-3:          var(--dark-deepest);
  --border-subtle: var(--dark-border-1);
  --border-strong: var(--dark-border-2);
  --border-bold:   var(--dark-border-3);
}

/* ──────────────────────────────────────────────────────────────────────────
   Semantic element styles — opt-in via .ds- prefix or applied to bare tags
   inside .ds-scope. Keep these minimal; they are the canonical typographic
   recipes, not a full reset.
   ────────────────────────────────────────────────────────────────────────── */

.ds-scope, .ds-scope * { box-sizing: border-box; }

.ds-scope {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-display, .ds-scope .ds-display {
  font-family: var(--font-sans);
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  font-weight: var(--t-display-w);
  letter-spacing: -0.02em;
  margin: 0;
}

.ds-h1, .ds-scope h1 {
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  font-weight: var(--t-h1-w);
  letter-spacing: -0.01em;
  margin: 0;
}

.ds-h2, .ds-scope h2 {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  font-weight: var(--t-h2-w);
  letter-spacing: var(--t-h2-tracking);
  margin: 0;
}

.ds-h3, .ds-scope h3 {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: var(--t-h3-w);
  margin: 0;
}

.ds-body, .ds-scope p {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  margin: 0;
  text-wrap: pretty;
}

.ds-caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  color: var(--fg-2);
}

.ds-small {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--fg-3);
}

.ds-mono-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  letter-spacing: var(--t-mono-tracking);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

.ds-link {
  color: var(--brand-blue-link);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.ds-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Buttons — pill primary, sm secondary, ghost tertiary */
.ds-btn {
  font-family: var(--font-sans);
  font-size: var(--t-button-size);
  font-weight: var(--t-button-w);
  line-height: var(--t-button-lh);
  padding: 8px 32px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  display: inline-flex; align-items: center; gap: 8px;
}
.ds-btn:active { transform: scale(0.98); }
.ds-btn-lg { padding: 14px 40px; font-size: 16px; }
.ds-btn:focus-visible {
  outline: 2px solid var(--brand-blue-30);
  outline-offset: 2px;
}

.ds-btn-primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.ds-btn-primary:hover { background: var(--gray-800); }

.ds-btn-secondary {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-strong);
  border-radius: var(--radius-pill);
}
.ds-btn-secondary:hover { border-color: var(--border-bold); background: var(--bg-3); }

.ds-btn-brand {
  background: var(--brand-blue);
  color: var(--white);
  border-color: var(--brand-blue);
}
.ds-btn-brand:hover { background: var(--brand-indigo); border-color: var(--brand-indigo); }

.ds-btn-ghost {
  background: transparent;
  color: var(--fg-1);
  padding: 8px;
  border-radius: var(--radius-sm);
}
.ds-btn-ghost:hover { background: var(--bg-3); }

/* Cards */
.ds-card {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* Inputs */
.ds-input {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  color: var(--fg-1);
  width: 100%;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.ds-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-30);
}

/* Badge */
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--fg-2);
  background: var(--bg-2);
}
.ds-badge-brand {
  border-color: var(--brand-blue-30);
  color: var(--brand-blue-link);
  background: var(--brand-blue-06);
}