/* ============================================================
   SCALYEX — MAIN CSS
   Design Tokens · Reset · Typography · Utilities
   ============================================================
   HOW TO EDIT:
   - All colors are in :root (light) and [data-theme="dark"]
   - All fonts controlled by --font-display and --font-body
   - Spacing scale: --space-xs through --space-4xl
   ============================================================ */

/* ─── Google Fonts loaded via <link> in HTML head ─── */
/* Do NOT add @import here — it causes issues on GitHub Pages */

/* ─── Design Tokens — Light Mode (Default) ─── */
:root {
  /* Colors */
  --bg:            #FFFFFF;
  --bg-secondary:  #F5F5F5;
  --bg-card:       #FAFAFA;
  --text-primary:  #0A0A0A;
  --text-secondary:#666666;
  --text-muted:    #999999;
  --accent:        #E01010;       /* Red — accent only */
  --accent-hover:  #B50D0D;
  --border:        #E5E5E5;
  --border-strong: #CCCCCC;
  --nav-bg:        rgba(255, 255, 255, 0.92);
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.08);

  /* Fonts — Barlow matches the Scalyex logo font */
  --font-display: 'Barlow', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-weight-display: 800; /* ExtraBold — same as logo */

  /* Spacing Scale */
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.5rem;    /* 8px  */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  5rem;      /* 80px */
  --space-4xl:  8rem;      /* 128px */

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-theme:  400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --max-width:   1200px;
  --nav-height:  120px;
}

/* ─── Mobile spacing overrides ─── */
@media (max-width: 768px) {
  :root {
    --nav-height:  80px;
    --space-4xl:   4rem;   /* 128px → 64px on mobile */
    --space-3xl:   3rem;   /* 80px  → 48px on mobile */
  }
}
@media (max-width: 480px) {
  :root {
    --space-4xl:   3rem;   /* 48px on small phones */
    --space-3xl:   2.5rem;
  }
}

/* ─── Design Tokens — Dark Mode ─── */
[data-theme="dark"] {
  --bg:            #0A0A0A;
  --bg-secondary:  #111111;
  --bg-card:       #141414;
  --text-primary:  #FFFFFF;
  --text-secondary:#AAAAAA;
  --text-muted:    #666666;
  --accent:        #E01010;       /* stays red in both modes */
  --accent-hover:  #FF2222;
  --border:        #1E1E1E;
  --border-strong: #2E2E2E;
  --nav-bg:        rgba(10, 10, 10, 0.92);
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.7;
  transition: background var(--transition-theme), color var(--transition-theme);
  overflow-x: hidden;
}

/* Prevent flash on theme switch */
body.theme-transitioning * {
  transition: background var(--transition-theme),
              color var(--transition-theme),
              border-color var(--transition-theme) !important;
}

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

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Display / Hero Heading */
.display-xl {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.display-lg {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.display-md {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.display-sm {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Body text */
.text-lg { font-size: 1.25rem; line-height: 1.7; }
.text-md { font-size: 1.125rem; line-height: 1.75; }
.text-sm { font-size: 0.9375rem; line-height: 1.6; }
.text-xs { font-size: 0.8125rem; line-height: 1.5; }

/* Labels */
.label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.label-accent {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Color utilities */
.text-accent   { color: var(--accent); }
.text-primary  { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted    { color: var(--text-muted); }

/* ─── Layout Utilities ─── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
  .container { padding: 0 1.25rem; }
}
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
}

.section {
  padding: var(--space-4xl) 0;
}

.section-sm {
  padding: var(--space-3xl) 0;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }

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

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

/* Flex helpers */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

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

/* Dividers */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

.divider-accent {
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin: var(--space-lg) 0;
}

/* Background variants */
.bg-secondary { background: var(--bg-secondary); }
.bg-dark {
  background: #0A0A0A;
  color: #FFFFFF;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Selection */
::selection {
  background: var(--accent);
  color: #FFFFFF;
}