/*
 * GOppa Designs - Design Tokens
 * Centralised design system variables
 * ================================
 */

:root {
  /* ===== Colour Palette ===== */

  /* Base backgrounds (dark to light) */
  --color-bg-deepest: #07080c;
  --color-bg-deep: #0b0d12;
  --color-bg-base: #131621;
  --color-bg-raised: #1a1f2c;
  --color-bg-elevated: #222839;

  /* Brand colours */
  --color-brand-gold: #d6c06a;
  --color-brand-gold-dim: #9d8c45;
  --color-brand-orange: #ff9350;
  --color-brand-lava: #ff7a1a;
  --color-brand-blue: #3f67ff;

  /* Text colours */
  --color-text-primary: #f3f4f8;
  --color-text-secondary: #b2b9c8;
  --color-text-muted: #7a8299;

  /* Semantic colours */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;

  /* Stroke/border colours */
  --color-stroke-base: #262b39;
  --color-stroke-soft: rgba(68, 79, 101, 0.35);
  --color-stroke-glow: rgba(214, 192, 106, 0.35);
  --color-stroke-accent: rgba(63, 103, 255, 0.18);

  /* ===== Glassmorphism Tokens ===== */

  /* Blur levels */
  --glass-blur-subtle: 4px;
  --glass-blur-soft: 8px;
  --glass-blur-medium: 12px;
  --glass-blur-strong: 20px;
  --glass-blur-heavy: 32px;

  /* Glass background opacities */
  --glass-opacity-light: 0.6;
  --glass-opacity-medium: 0.78;
  --glass-opacity-heavy: 0.92;

  /* Glass panel backgrounds */
  --glass-panel-dark: linear-gradient(
    180deg,
    rgba(25, 29, 40, 0.92),
    rgba(9, 11, 18, 0.92)
  );
  --glass-panel-medium: linear-gradient(
    180deg,
    rgba(25, 29, 40, 0.85),
    rgba(13, 16, 24, 0.88)
  );
  --glass-panel-light: linear-gradient(
    180deg,
    rgba(30, 35, 48, 0.75),
    rgba(18, 22, 32, 0.8)
  );

  /* Glass border effects */
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.04);
  --glass-border-soft: 1px solid rgba(255, 255, 255, 0.08);
  --glass-border-accent: 1px solid rgba(63, 103, 255, 0.18);
  --glass-border-glow: 1px solid rgba(214, 192, 106, 0.35);

  /* Glass inset highlights */
  --glass-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glass-inset-glow: inset 0 0 24px rgba(63, 103, 255, 0.12);

  /* ===== Typography Scale ===== */

  /* Font families */
  --font-sans:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* Font sizes (modular scale ~1.2) */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 2rem; /* 32px */
  --text-4xl: 2.5rem; /* 40px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.5rem; /* 56px */

  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-caps: 0.18em;

  /* ===== Spacing Scale ===== */
  /* Based on 4px unit */

  --space-0: 0;
  --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 */

  /* ===== Border Radius ===== */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */

  /* Elevation shadows */
  --shadow-sm: 0 2px 8px rgba(4, 5, 12, 0.25);
  --shadow-md: 0 8px 24px rgba(4, 5, 12, 0.35);
  --shadow-lg: 0 22px 48px rgba(4, 5, 12, 0.45);
  --shadow-xl: 0 35px 65px rgba(8, 12, 18, 0.55);

  /* Glow shadows */
  --shadow-glow-gold:
    0 0 36px rgba(214, 192, 106, 0.18), 0 0 120px rgba(255, 122, 26, 0.12);
  --shadow-glow-gold-strong: 0 0 50px rgba(214, 192, 106, 0.4);
  --shadow-glow-blue: 0 0 40px rgba(63, 103, 255, 0.2);
  --shadow-glow-lava: 0 0 80px rgba(255, 122, 26, 0.25);

  /* Focus ring */
  --shadow-focus: 0 0 0 4px rgba(214, 192, 106, 0.22);

  /* ===== Animation Tokens ===== */

  /* Durations */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-reveal: 720ms;

  /* Easing curves */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Layout ===== */

  --container-max: 1200px;
  --container-lg: 1024px;
  --container-md: 768px;
  --container-sm: 640px;

  /* ===== Z-Index Scale ===== */

  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-header: 60;
  --z-modal: 100;
  --z-drawer: 200;
  --z-tooltip: 300;
}

/* ===== Noise Texture Overlay ===== */
/* Optional: adds subtle texture to glass panels */
.glass-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  border-radius: inherit;
}

/* ===== Glass Panel Utility Classes ===== */

.glass-panel {
  background: var(--glass-panel-dark);
  backdrop-filter: blur(var(--glass-blur-medium));
  -webkit-backdrop-filter: blur(var(--glass-blur-medium));
  border: var(--glass-border-accent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--glass-inset-top);
}

.glass-panel--light {
  background: var(--glass-panel-light);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
}

.glass-panel--glow {
  border: var(--glass-border-glow);
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
}