/* ==========================================================================
   GLASSHEAD TECH — Design System Foundation
   main.css — Tokens · Reset · Base · Layout Utilities
   ========================================================================== */

/* ── 1. CSS Custom Properties (Design Tokens) ────────────────────────────── */
:root {

  /* Raw Color Primitives */
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* Semantic Color Aliases */
  --color-bg-primary:    #08080d;
  --color-bg-surface:    #0f0f18;
  --color-bg-elevated:   #13131e;
  --color-bg-card:       #15151f;
  --color-bg-hover:      #1a1a28;
  --color-accent:        var(--blue-500);
  --color-accent-light:  var(--blue-400);
  --color-accent-dark:   var(--blue-600);
  --color-accent-glow:   rgba(59, 130, 246, 0.20);
  --color-accent-glow-lg: rgba(59, 130, 246, 0.12);
  --color-text-primary:  #f0f0f5;
  --color-text-secondary:#c8c8d4;
  --color-text-muted:    #8a8a9a;
  --color-text-subtle:   #5a5a6a;
  --color-border:        rgba(255, 255, 255, 0.06);
  --color-border-hover:  rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(59, 130, 246, 0.30);
  --color-white:         #ffffff;
  --color-overlay:       rgba(8, 8, 13, 0.85);

  /* Gradient Definitions */
  --gradient-accent: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  --gradient-surface: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-primary) 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(59,130,246,0.12) 0%, transparent 60%),
                   radial-gradient(ellipse 60% 80% at 80% 20%, rgba(59,130,246,0.07) 0%, transparent 50%),
                   var(--color-bg-primary);
  --gradient-text: linear-gradient(135deg, #f0f0f5 0%, var(--blue-300) 100%);
  --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(8,8,13,0.95) 100%);

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 30px rgba(59,130,246,0.25), 0 0 60px rgba(59,130,246,0.10);
  --shadow-accent-sm: 0 0 15px rgba(59,130,246,0.20);
  --shadow-card:  0 2px 20px rgba(0,0,0,0.4), 0 0 0 1px var(--color-border);

  /* Border Radius */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Spacing Scale */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* Section Padding */
  --section-y: clamp(4rem, 8vw, 8rem);
  --section-y-sm: clamp(3rem, 5vw, 5rem);

  /* Fluid Typography Scale (390px → 1440px) */
  --text-xs:   clamp(0.70rem,  0.65rem + 0.25vw, 0.80rem);
  --text-sm:   clamp(0.813rem, 0.75rem + 0.30vw, 0.938rem);
  --text-base: clamp(0.938rem, 0.875rem + 0.30vw, 1.063rem);
  --text-lg:   clamp(1.063rem, 0.95rem + 0.50vw, 1.25rem);
  --text-xl:   clamp(1.188rem, 1rem + 0.80vw, 1.5rem);
  --text-2xl:  clamp(1.375rem, 1.1rem + 1.20vw, 1.875rem);
  --text-3xl:  clamp(1.625rem, 1.2rem + 1.80vw, 2.375rem);
  --text-4xl:  clamp(2rem,     1.4rem + 2.50vw, 3rem);
  --text-5xl:  clamp(2.5rem,   1.5rem + 4.00vw, 4rem);
  --text-hero: clamp(2.75rem,  1.6rem + 4.80vw, 5rem);

  /* Font Families */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* Letter Spacing */
  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.15em;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-top:      500;

  /* Layout */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-sm:   900px;
  --container-xs:   680px;
  --nav-height:     72px;
}


/* ── 2. Modern CSS Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

img, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

picture {
  display: block;
}

table {
  border-collapse: collapse;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--color-accent-glow);
  color: var(--color-text-primary);
}


/* ── 3. Scrollbar Styling ────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track { background: var(--color-bg-primary); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }


/* ── 4. Typography Utilities ─────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-hero { font-size: var(--text-hero); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent); }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.font-light    { font-weight: var(--weight-light); }
.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); }

.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-wide   { letter-spacing: var(--tracking-wide); }
.tracking-wider  { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

.uppercase { text-transform: uppercase; }

/* Gradient text */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 5. Layout Utilities ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.container--wide { max-width: var(--container-wide); }
.container--sm   { max-width: var(--container-sm); }
.container--xs   { max-width: var(--container-xs); }

.section {
  padding-block: var(--section-y);
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--dark {
  background-color: var(--color-bg-surface);
}

.section--elevated {
  background-color: var(--color-bg-elevated);
}

/* Grid Utilities */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid--auto-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.grid--auto-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid--auto-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid--4,
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }
}

/* Flex Utilities */
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* Visibility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Misc */
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* Screen reader text */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── 6. Content Body (Blog / Page editor content) ─────────────────────────── */
.content-body {
  max-width: var(--container-xs);
  margin-inline: auto;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.content-body h2,
.content-body h3,
.content-body h4 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.content-body h2 { font-size: var(--text-3xl); }
.content-body h3 { font-size: var(--text-2xl); }
.content-body h4 { font-size: var(--text-xl); }

.content-body p { margin-bottom: var(--space-6); }

.content-body ul,
.content-body ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.content-body ul { list-style: disc; }
.content-body ol { list-style: decimal; }

.content-body li { margin-bottom: var(--space-2); }

.content-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-glow);
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.content-body a:hover { color: var(--color-accent-light); }

.content-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  background: var(--color-bg-elevated);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  font-style: italic;
}

.content-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-elevated);
  color: var(--color-accent-light);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
}

.content-body pre {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow-x: auto;
  margin-bottom: var(--space-8);
}

.content-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
}

.content-body img {
  border-radius: var(--radius-lg);
  margin-block: var(--space-8);
  border: 1px solid var(--color-border);
}

.content-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-10);
}

/* ── 7. WordPress Core Alignment Classes ─────────────────────────────────── */
.aligncenter { margin-inline: auto; }
.alignleft   { float: left; margin-right: var(--space-6); }
.alignright  { float: right; margin-left: var(--space-6); }
.alignwide   { max-width: 110%; margin-inline: -5%; }
.alignfull   { max-width: 100vw; margin-inline: calc(50% - 50vw); }