/* ==========================================================================
   BRIXVEN — Design Tokens
   Single source of truth for every colour, type size, spacing, radius and
   shadow used on the site. Nothing outside this file should hard-code a
   raw value for any of these — reference the variable instead.
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --color-primary: #0D9488;
  --color-primary-hover: #0B7D73;
  --color-dark: #161F36;
  --color-light: #0A0E1A;
  --color-card: #10182B;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-text: #E8ECF4;
  --color-gray: #8A93A6;
  --color-success: #00C853;
  --color-danger: #FF3B30;

  /* Secondary accents — the bright mint used for text/glow accents (never
     as a solid button fill, which stays on --color-primary for contrast
     with white text) and the violet used for the second accent family. */
  --color-accent-bright: #5EEAD4;
  --color-violet: #8B7FFF;
  --color-ink: #06131A;

  /* Derived / utility tones (built from the tokens above, never new hexes) */
  --color-primary-tint: rgba(94, 234, 212, 0.1);
  --color-primary-glow: rgba(94, 234, 212, 0.35);
  --color-dark-90: rgba(10, 14, 26, 0.9);
  --color-white: #FFFFFF;
  --color-overlay: rgba(10, 14, 26, 0.6);

  /* ---- Typography ---- */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --text-hero: clamp(2.75rem, 4.6vw, 4.5rem);     /* 72px desktop */
  --text-section: clamp(2rem, 3.4vw, 3.25rem);    /* 52px desktop */
  --text-card-title: clamp(1.25rem, 1.8vw, 1.75rem); /* 28px desktop */
  --text-body: 1.125rem;                          /* 18px */
  --text-small: 0.875rem;                         /* 14px */
  --text-label: 0.75rem;                          /* 12px */

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-body: 1.65;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-max-wide: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Spacing scale ---- */
  --space-micro: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-section: 80px;
  --space-hero: 120px;
  --space-huge: 160px;

  /* ---- Radius scale ---- */
  --radius-button: 999px;
  --radius-card: 24px;
  --radius-input: 16px;
  --radius-image: 24px;
  --radius-section: 32px;

  /* ---- Shadows (dark-theme: soft black depth + a teal glow for hover/focus) */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-medium: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-large: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 24px 60px rgba(94, 234, 212, 0.12);
  --shadow-glow-primary: 0 16px 44px rgba(94, 234, 212, 0.3);

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-dark: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-dark: rgba(255, 255, 255, 0.06);
  --glass-blur: 16px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-hero: 0.6s;
  --duration-slow: 0.8s;

  /* ---- Grid ---- */
  --grid-columns-desktop: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;
  --grid-gap: var(--space-lg);

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}