/* =========================================================
   XamiHub — Foundations
   Colors + Typography tokens and semantic styles.

   Usage:
     <link rel="stylesheet" href="colors_and_type.css" />

   Philosophy:
     - Deep purple (#7543FF) is THE signature color. Pair it with
       dark navy/ink surfaces and a lavender "light on dark" text
       tone (#E6EAFF) for the core hero look.
     - Inter is the default UI + body face. Roboto Mono is used
       for code, data, and micro-labels.
     - "Casing" for code-style labels, uppercase micro-text, and
       data is via Roboto Mono (not Inter uppercase).
   ========================================================= */

/* ---------- Fonts ------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2') format('woff2');
}

/* ---------- Color tokens ---------------------------------------- */
:root {
  /* Brand — Purple primary */
  --xami-purple-50:  #F1EDFF;
  --xami-purple-100: #E0D6FF;
  --xami-purple-200: #C3B0FF;
  --xami-purple-300: #A084FF;
  --xami-purple-400: #8A62FF;
  --xami-purple-500: #7543FF;   /* ★ Primary brand color */
  --xami-purple-600: #5E2FE0;
  --xami-purple-700: #4A22B8;
  --xami-purple-800: #361785;
  --xami-purple-900: #1F0C56;

  /* Lavender — secondary, used for type on dark */
  --xami-lavender-50:  #F7F8FF;
  --xami-lavender-100: #E6EAFF;  /* ★ Signature "light on dark" text */
  --xami-lavender-200: #CDD3F7;
  --xami-lavender-300: #A5ADE0;
  --xami-lavender-400: #7F87BC;

  /* Ink / surfaces — deep navy, not pure black */
  --xami-ink-950: #07071A;   /* Deepest canvas */
  --xami-ink-900: #0D0C24;   /* Primary dark bg */
  --xami-ink-800: #15142E;
  --xami-ink-700: #201E3F;
  --xami-ink-600: #2E2C54;

  /* Neutrals (light mode) */
  --xami-white:   #FFFFFF;
  --xami-gray-50: #F7F7FA;
  --xami-gray-100:#EEEEF4;
  --xami-gray-200:#DDDCE8;
  --xami-gray-300:#BFBED0;
  --xami-gray-400:#8E8CA5;
  --xami-gray-500:#5F5D7A;
  --xami-gray-600:#3F3E55;
  --xami-gray-700:#2B2A3E;
  --xami-gray-800:#1A1A28;
  --xami-gray-900:#0D0C24;

  /* Semantic — base */
  --xami-success: #2DD4A4;
  --xami-warning: #F5B547;
  --xami-danger:  #FF5C7A;
  --xami-info:    #5B9BFF;

  /* Semantic — on-dark tints (brand default palette) */
  --xami-success-ink: #7DFFB3;
  --xami-warning-ink: #FFC670;
  --xami-danger-ink:  #FF7B91;
  --xami-info-ink:    #7FB6FF;

  /* --- Semantic foreground / background / border --- */
  /* Default theme is DARK (the brand's hero look). Override with
     [data-theme="light"] on a container for light surfaces. */
  --fg1: var(--xami-lavender-100);          /* primary text */
  --fg2: var(--xami-lavender-300);          /* secondary text */
  --fg3: var(--xami-lavender-400);          /* tertiary text / meta */
  --fg-accent: var(--xami-purple-400);
  --fg-on-accent: var(--xami-lavender-100);

  --bg1: var(--xami-ink-900);               /* primary surface */
  --bg2: var(--xami-ink-800);               /* raised / card */
  --bg3: var(--xami-ink-700);               /* hover / popover */
  --bg-accent: var(--xami-purple-500);

  --border1: rgba(230, 234, 255, 0.09);     /* subtle divider */
  --border2: rgba(230, 234, 255, 0.16);     /* input / card border */
  --border-accent: var(--xami-purple-500);

  /* Semantic roles — these swap on theme change */
  --fg-success: var(--xami-success-ink);
  --fg-warning: var(--xami-warning-ink);
  --fg-danger:  var(--xami-danger-ink);
  --fg-info:    var(--xami-info-ink);
  --bg-success-soft: rgba(125, 255, 179, 0.06);
  --bg-warning-soft: rgba(255, 198, 112, 0.06);
  --bg-danger-soft:  rgba(255, 123, 145, 0.06);
  --bg-purple-soft:  rgba(117, 67, 255, 0.08);

  /* Code / terminal palette — syntax-highlighting tokens */
  --term-bg:       #0A0814;
  --term-chrome:   #0E0B1C;
  --term-dot:      #322A50;
  --term-comment:  #8478AD;
  --term-keyword:  #B79CFF;
  --term-string:   #9CD6A5;
  --term-number:   #FFC670;
  --term-punct:    var(--xami-purple-400);
  --term-fg:       var(--xami-lavender-100);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--xami-ink-900), 0 0 0 4px var(--xami-purple-400);

  /* ----- Spacing scale (4px base) ----- */
  --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;
  --space-32: 128px;

  /* ----- Radii ----- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  /* Icon container radius — mirrors the 11.827/49.516 ratio from icone-xami.svg */
  --radius-icon: 23.87%;

  /* ----- Elevation ----- */
  --shadow-sm: 0 1px 2px rgba(7, 7, 26, 0.4);
  --shadow-md: 0 4px 16px rgba(7, 7, 26, 0.45);
  --shadow-lg: 0 16px 40px rgba(7, 7, 26, 0.55);
  --shadow-glow: 0 0 0 1px rgba(117, 67, 255, 0.4), 0 12px 48px -12px rgba(117, 67, 255, 0.6);

  /* ----- Type scale ----- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;

  --leading-tight: 1.08;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;
  --tracking-label: 0.14em; /* uppercase/mono micro-labels */
}

/* Light theme override — for docs, light surfaces, PDFs */
[data-theme="light"] {
  --fg1: var(--xami-ink-900);
  --fg2: var(--xami-gray-600);
  --fg3: var(--xami-gray-500);
  --fg-accent: var(--xami-purple-600);
  --fg-on-accent: var(--xami-lavender-100);

  --bg1: var(--xami-white);
  --bg2: var(--xami-gray-50);
  --bg3: var(--xami-gray-100);
  --bg-accent: var(--xami-purple-500);

  --border1: rgba(13, 12, 36, 0.08);
  --border2: rgba(13, 12, 36, 0.14);

  /* Semantic roles — use saturated base values against light surfaces */
  --fg-success: #0EA771;
  --fg-warning: #B67A0E;
  --fg-danger:  #D43656;
  --fg-info:    #2C6BD4;
  --bg-success-soft: rgba(45, 212, 164, 0.10);
  --bg-warning-soft: rgba(245, 181, 71, 0.14);
  --bg-danger-soft:  rgba(255, 92, 122, 0.10);
  --bg-purple-soft:  rgba(117, 67, 255, 0.08);

  /* Terminal: stays dark in light mode — it's a deliberate "code panel"
     affordance; keeping it dark preserves contrast for syntax highlighting. */
}

/* ---------- Semantic element styles ----------------------------- */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h4, .h4 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
}
h5, .h5 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}
h6, .h6 {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-snug);
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

small, .small {
  font-size: var(--text-sm);
  color: var(--fg2);
}

/* Eyebrow / overline — brand uses these on dark hero sections */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-accent);
  font-weight: 500;
}

/* Display — for hero headlines; tighter, bigger */
.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Mono — data, code, labels */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code {
  background: var(--bg2);
  border: 1px solid var(--border1);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
pre {
  background: var(--bg2);
  border: 1px solid var(--border1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-normal);
}
pre code { background: none; border: 0; padding: 0; }

/* Link */
a {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

/* Selection */
::selection { background: var(--xami-purple-500); color: var(--xami-lavender-100); }

/* Utility: the signature "Xami X glyph" container */
.xami-icon-frame {
  display: inline-grid;
  place-items: center;
  background: var(--xami-purple-500);
  color: var(--xami-lavender-100);
  border-radius: var(--radius-icon);
  aspect-ratio: 1;
  width: 48px;
}