/* ============================================================
   PICTORYX — Design Tokens System
   Golden Ratio (1:1.618) Based
   Inspired by Dieter Rams & Steve Jobs
   ============================================================ */

:root {
  /* ── FIBONACCI SPACING (Golden Ratio: 1:1.618) ────────────── */
  --sp-0: 0;
  --sp-1: 8px;      /* fibonacci[1] */
  --sp-2: 13px;     /* fibonacci[2] */
  --sp-3: 21px;     /* fibonacci[3] */
  --sp-4: 34px;     /* fibonacci[4] */
  --sp-5: 55px;     /* fibonacci[5] */
  --sp-6: 89px;     /* fibonacci[6] */
  --sp-7: 144px;    /* fibonacci[7] */

  /* ── GOLDEN RATIO CONTAINERS ──────────────────────────────── */
  --container-max: 1440px;
  --container-content: 890px;  /* 1440 / 1.618 */
  --hero-height: 55vh;
  --hero-width: calc(55vh * 1.618);  /* Perfect aspect ratio */
  --card-w: 377px;
  --card-h: 610px;  /* 1:1.618 */
  --card-w-compact: 233px;
  --card-h-compact: 377px;  /* 1:1.618 */

  /* ── COLOR PALETTE (Deep Space Theme) ──────────────────────– */
  --color-deep-space: #0a0e27;
  --color-void: #1a1a3e;
  --color-frost: #FFFFFF;
  --color-whisper: rgba(255, 255, 255, 0.6);
  --color-whisper-dim: rgba(255, 255, 255, 0.3);
  --color-gold: #FFD700;
  --color-cyan: #00D9FF;

  /* ── GRADIENTS ────────────────────────────────────────────── */
  --gradient-background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 50%, #0d1b35 100%);
  --gradient-background-inset: inset 0px 200px 300px rgba(255, 255, 255, 0.03);

  /* ── TYPOGRAPHY (SF Pro Display Stack) ────────────────────– */
  --font-primary: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes (Fibonacci-based) */
  --fs-h1: 55px;
  --fs-h2: 34px;
  --fs-h3: 21px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-micro: 11px;

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

  /* Letter Spacing (Kerning) */
  --ls-tight: -0.02em;   /* for titles */
  --ls-normal: -0.01em;  /* for body */
  --ls-loose: 0em;       /* for labels */

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  /* ── BORDER RADIUS ────────────────────────────────────────– */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ── ANIMATIONS (Spring Physics) ──────────────────────────– */
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-sharp: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 150ms;
  --dur-normal: 300ms;
  --dur-slow: 600ms;

  /* ── GLASSMORPHISM ────────────────────────────────────────– */
  --glass-blur: 8px;
  --glass-bg: rgba(20, 20, 50, 0.6);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ── BREAKPOINTS ──────────────────────────────────────────– */
  --bp-mobile: 377px;
  --bp-tablet: 610px;
  --bp-desktop: 890px;
  --bp-wide: 1440px;
}

/* ── THEME APPLICATION ────────────────────────────────────── */
html {
  font-family: var(--font-primary);
  background: var(--gradient-background);
  color: var(--color-frost);
}

body {
  margin: 0;
  padding: 0;
  background: var(--gradient-background);
  box-shadow: var(--gradient-background-inset);
}

/* ── TYPOGRAPHY SYSTEM ────────────────────────────────────── */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-normal);
  margin: 0;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  margin: 0;
}

p, body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
}

small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-loose);
  line-height: var(--lh-normal);
}

/* ── SPACING UTILITIES ────────────────────────────────────── */
.gap-xs { gap: var(--sp-1); }
.gap-sm { gap: var(--sp-2); }
.gap-md { gap: var(--sp-3); }
.gap-lg { gap: var(--sp-4); }
.gap-xl { gap: var(--sp-5); }
.gap-xxl { gap: var(--sp-6); }

.p-xs { padding: var(--sp-1); }
.p-sm { padding: var(--sp-2); }
.p-md { padding: var(--sp-3); }
.p-lg { padding: var(--sp-4); }
.p-xl { padding: var(--sp-5); }

.m-xs { margin: var(--sp-1); }
.m-sm { margin: var(--sp-2); }
.m-md { margin: var(--sp-3); }
.m-lg { margin: var(--sp-4); }
.m-xl { margin: var(--sp-5); }

/* ── CONTAINER UTILITIES ──────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.container-content {
  max-width: var(--container-content);
  margin: 0 auto;
}

/* ── FLEXBOX UTILITIES ────────────────────────────────────– */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* ── INTERACTIVE ELEMENTS ─────────────────────────────────– */
button, a, [role="button"] {
  transition: all var(--dur-normal) var(--easing-spring);
}

button:disabled,
a:disabled,
[role="button"][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── SCROLLBAR (Custom) ───────────────────────────────────– */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(26, 26, 62, 0.4);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.5);
}

/* ── RESPONSIVE BREAKPOINTS ───────────────────────────────– */
@media (max-width: 890px) {
  :root {
    --sp-5: 34px;  /* Scale down spacing on smaller screens */
  }
  
  .container {
    padding: 0 var(--sp-4);
  }
  
  h1 { font-size: var(--fs-h2); }
  h2 { font-size: var(--fs-h3); }
}

@media (max-width: 610px) {
  :root {
    --sp-5: 21px;  /* Minimal spacing on mobile */
  }
  
  .container {
    padding: 0 var(--sp-3);
  }
  
  h1 { font-size: var(--fs-h3); }
  h2 { font-size: var(--fs-body); }
}

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

html {
  scroll-behavior: smooth;
}