/* ============================================================
   ADIM — Design tokens
   Parent brand: AI solutions consultancy.
   Adim Lex is one product under this brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Core surface palette (dark-primary) ---- */
  --obsidian:       #0B0D10;   /* primary canvas — near-black with slight blue */
  --obsidian-rich:  #06080A;   /* deeper, for hover/press */
  --carbon:         #14171C;   /* secondary dark surface */
  --graphite:       #1C2027;   /* card backgrounds on dark */
  --graphite-soft:  #262B33;   /* hover state on dark cards */

  /* ---- Light surface palette (used in alternating sections) ---- */
  --bone:           #F5F2EA;   /* warm cream — soft light surface */
  --paper:          #ECE6D6;   /* deeper cream — section separators */
  --paper-deep:     #E0D9C5;   /* deepest cream */

  /* ---- Slate neutrals (cool grays) ---- */
  --slate-50:   #F1F2F4;
  --slate-100:  #DFE1E5;
  --slate-200:  #BFC3CB;
  --slate-300:  #8E94A0;
  --slate-400:  #5E6470;
  --slate-500:  #424954;
  --slate-600:  #2F343D;
  --slate-700:  #1F242C;
  --slate-800:  #161A20;
  --slate-900:  #0F1217;

  /* ---- Accent palette (default: Cobalt deep blue — official brand color) ---- */
  /* Overridden per-variation via [data-palette="..."] on root */
  --accent:       #2A5DE0;   /* Cobalt — official deep blue. Brand primary. */
  --accent-deep:  #1E40AF;   /* Deeper, for hover/fills */
  --accent-soft:  #0F1A38;   /* Dark tinted accent surface */
  --accent-ink:   #F5F2EA;   /* Cream foreground when on accent fill */

  /* ---- Semantic ---- */
  --success:      #4FB37A;
  --success-soft: #1A2A20;
  --warn:         #E8B341;
  --warn-soft:    #2A2417;
  --danger:       #E55858;
  --danger-soft:  #2A1A1A;
  --info:         #6FA6E0;
  --info-soft:    #18222E;

  /* ---- Borders (on dark) ---- */
  --hairline:        rgba(255, 255, 255, 0.08);  /* default thin border on dark */
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --hairline-dim:    rgba(255, 255, 255, 0.04);
  --hairline-light:  rgba(11, 13, 16, 0.10);     /* thin border on light surface */

  /* ---- Text colors on dark surface ---- */
  --text-bright: #F5F2EA;   /* primary text on obsidian */
  --text:        #D7D4CB;   /* secondary text */
  --text-mute:   #8B8E94;   /* tertiary */
  --text-dim:    #5E6470;   /* quaternary, labels */

  /* ---- Text colors on light surface (cream) ---- */
  --ink:         #0B0D10;
  --ink-soft:    #2F343D;
  --ink-mute:    #5E6470;

  /* ---- Typography ---- */
  --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type scale ---- */
  --fs-display-xl: 96px;   --lh-display-xl: 0.95;  --tr-display-xl: -0.04em;
  --fs-display-l:  72px;   --lh-display-l:  0.98;  --tr-display-l:  -0.035em;
  --fs-display-m:  52px;   --lh-display-m:  1.02;  --tr-display-m:  -0.030em;
  --fs-display-s:  36px;   --lh-display-s:  1.08;  --tr-display-s:  -0.022em;
  --fs-h1:         28px;   --lh-h1:         1.18;  --tr-h1:         -0.018em;
  --fs-h2:         22px;   --lh-h2:         1.25;  --tr-h2:         -0.012em;
  --fs-h3:         17px;   --lh-h3:         1.35;  --tr-h3:         -0.005em;
  --fs-body-lg:    17px;   --lh-body-lg:    1.55;
  --fs-body:       15px;   --lh-body:       1.55;
  --fs-body-sm:    13px;   --lh-body-sm:    1.5;
  --fs-caption:    12px;   --lh-caption:    1.4;
  --fs-label:      11px;   --lh-label:      1.2;   --tr-label:      0.10em;
  --fs-micro:      10px;   --lh-micro:      1.2;   --tr-micro:      0.14em;

  /* ---- Spacing (8pt grid) ---- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;
  --sp-13: 160px;

  /* ---- Radii — quite minimal ---- */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;   /* buttons, inputs */
  --r-lg:   6px;   /* cards */
  --r-xl:   8px;   /* modals */

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.55);
  --shadow-focus: 0 0 0 2px var(--accent);
  --glow-accent:  0 0 0 1px rgba(42,93,224,0.22), 0 8px 32px rgba(42,93,224,0.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      180ms;
  --dur-slow:      280ms;

  /* ---- Layout ---- */
  --container-max:   1240px;
  --container-prose: 640px;
  --container-wide:  1440px;
  --nav-h:           64px;
}

/* ============================================================
   Palette variations — swap accent via data-palette
   ============================================================ */

[data-palette="cobalt"]   {
  --accent:      #2A5DE0;
  --accent-deep: #1E40AF;
  --accent-soft: #0F1A38;
  --accent-ink:  #F5F2EA;
}
[data-palette="sapphire"] {
  --accent:      #1E3A8A;
  --accent-deep: #142862;
  --accent-soft: #0D1530;
  --accent-ink:  #F5F2EA;
}
[data-palette="indigo"]   {
  --accent:      #4338CA;
  --accent-deep: #312A9A;
  --accent-soft: #161430;
  --accent-ink:  #F5F2EA;
}
[data-palette="steel"]    {
  --accent:      #3D6B9C;
  --accent-deep: #2A4C70;
  --accent-soft: #131C28;
  --accent-ink:  #F5F2EA;
}

/* ============================================================
   Base resets
   ============================================================ */

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

html, body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--obsidian);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-bright);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  color: var(--text);
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ============================================================
   Utility classes
   ============================================================ */

.ad-display-xl { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 7.2vw, var(--fs-display-xl)); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); color: var(--text-bright); }
.ad-display-l  { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5.6vw, var(--fs-display-l));  line-height: var(--lh-display-l);  letter-spacing: var(--tr-display-l);  color: var(--text-bright); }
.ad-display-m  { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 4.2vw, var(--fs-display-m));  line-height: var(--lh-display-m);  letter-spacing: var(--tr-display-m);  color: var(--text-bright); }
.ad-display-s  { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, var(--fs-display-s));  line-height: var(--lh-display-s);  letter-spacing: var(--tr-display-s);  color: var(--text-bright); }
.ad-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--text-bright); }
.ad-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--text-bright); }
.ad-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-bright); }

.ad-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text); }
.ad-body    { font-size: var(--fs-body);    line-height: var(--lh-body);    color: var(--text); }
.ad-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-mute); }
.ad-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-mute); }

.ad-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-mute);
}

.ad-micro {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-dim);
}

.ad-mono { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.ad-accent { color: var(--accent); }

/* ============================================================
   Components
   ============================================================ */

.ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
}
.ad-btn:active { transform: translateY(1px); }

.ad-btn-primary {
  background: var(--text-bright);
  color: var(--obsidian);
  border-color: var(--text-bright);
}
.ad-btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

.ad-btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.ad-btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.ad-btn-secondary {
  background: transparent;
  color: var(--text-bright);
  border-color: var(--hairline-strong);
}
.ad-btn-secondary:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.25); }

.ad-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
}
.ad-btn-ghost:hover { color: var(--text-bright); background: rgba(255,255,255,0.04); }

.ad-btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: 12px; }
.ad-btn-lg { height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-body); }

/* Input */
.ad-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--text-bright);
  background: var(--carbon);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: all var(--dur-fast) var(--ease-standard);
}
.ad-input::placeholder { color: var(--text-dim); }
.ad-input:focus { outline: none; border-color: var(--accent); }

textarea.ad-input {
  height: auto;
  min-height: 120px;
  padding: var(--sp-3) var(--sp-4);
  resize: vertical;
  font-family: var(--font-ui);
}

/* Card on dark */
.ad-card {
  background: var(--carbon);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.ad-card:hover { border-color: var(--hairline-strong); }

/* Tag — small, monospace */
.ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--hairline);
}
.ad-tag-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ad-tag-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.ad-tag-warn    { background: var(--warn-soft);    color: var(--warn);    border-color: transparent; }
.ad-tag-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }

/* Section rules */
.ad-rule       { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.ad-rule-strong { height: 1px; background: var(--hairline-strong); border: 0; margin: 0; }

/* Blueprint registration mark (small cross icon used as decoration) */
.ad-reg-mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
}
.ad-reg-mark::before, .ad-reg-mark::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.ad-reg-mark::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.ad-reg-mark::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

/* Bracketed label — "[ LABEL ]" decorative monospace */
.ad-bracket {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.ad-bracket::before { content: '[ '; color: var(--text-dim); }
.ad-bracket::after  { content: ' ]'; color: var(--text-dim); }

/* Light surface variant — used on selected sections */
.ad-on-light {
  background: var(--bone);
  color: var(--ink);
}
.ad-on-light h1, .ad-on-light h2, .ad-on-light h3, .ad-on-light h4 { color: var(--ink); }
.ad-on-light p { color: var(--ink-soft); }
.ad-on-light .ad-label, .ad-on-light .ad-caption, .ad-on-light .ad-body-sm { color: var(--ink-mute); }
.ad-on-light .ad-card { background: #FFFFFF; border-color: rgba(11,13,16,0.08); }
.ad-on-light a { color: var(--ink); border-bottom-color: var(--ink); }
.ad-on-light .ad-tag { background: rgba(11,13,16,0.06); color: var(--ink-soft); border-color: rgba(11,13,16,0.10); }
.ad-on-light .ad-rule { background: rgba(11,13,16,0.10); }

/* Scrollbar styling for dark surfaces */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* Print-style numbered listing utility */
.ad-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Responsive layer — single override stack
   Tablets ≤ 1024px, phones ≤ 640px
   ============================================================ */

/* Section padding helper: when applied, automatically scales padding down */
.ad-section { padding: 120px 40px; }

/* Generic collapse utility: any element with .ad-stack becomes a single column on tablet/phone.
   Add this class to inline-style grids you want collapsed without converting them to CSS. */
@media (max-width: 1024px) {
  .ad-stack {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .ad-stack-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .ad-section { padding: 88px 28px !important; }
  .ad-pad-x   { padding-left: 28px !important; padding-right: 28px !important; }
}

@media (max-width: 640px) {
  .ad-stack-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ad-section { padding: 64px 20px !important; }
  .ad-pad-x   { padding-left: 20px !important; padding-right: 20px !important; }

  /* Display headings get a bit tighter on phone */
  .ad-display-xl { line-height: 1.04; }
  .ad-display-l  { line-height: 1.06; }
}

/* Nav: hide middle items + meta on mobile, keep logo + CTA */
@media (max-width: 880px) {
  .ad-nav-items { display: none !important; }
  .ad-nav-meta  { display: none !important; }
}

/* Buttons stretch full-width when stacked in a button group */
@media (max-width: 640px) {
  .ad-btn-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .ad-btn-group .ad-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Wide tables / dense grids — allow horizontal scroll instead of squashing */
.ad-hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* SVG diagrams — keep aspect ratio, never overflow */
.ad-svg-wrap svg { max-width: 100%; height: auto; }

/* Generic container — capped width, edge padding shrinks on small screens */
.ad-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 1024px) { .ad-container { padding: 0 28px; } }
@media (max-width: 640px)  { .ad-container { padding: 0 20px; } }

/* Page-level responsive paddings — auto-applied to every <section> inside .adim-page */
@media (max-width: 1024px) {
  .adim-page section { padding-left: 28px !important; padding-right: 28px !important; }
  .adim-page nav     { padding-left: 24px !important; padding-right: 24px !important; }
  .adim-page footer  { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 640px) {
  .adim-page section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  .adim-page nav     { padding-left: 18px !important; padding-right: 18px !important; }
  .adim-page footer  { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 24px !important; }
}