/* =========================================================
   VALRYN DESIGN TOKENS
   Shared platform variables
========================================================= */

:root {

  /* =======================================================
     CORE COLORS
  ======================================================= */

  --bg: #020814;
  --bg-soft: #061225;

  --panel: #0a1830;
  --panel-2: #0d223f;

  --text: #ffffff;
  --muted: #b9c7d8;

  --green: #2ddf8c;
  --green-soft: #8fffc5;

  --blue: #0b5cff;

  --gold: #d4af37;
  --gold-light: #ffe36d;

  --danger: #ff5d6c;
  --warning: #ffb84d;
  --success: #2ddf8c;

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* =======================================================
     HEADER AND NAVIGATION
  ======================================================= */

  --header: 76px;
  --header-mobile: 64px;

  /* =======================================================
     PAGE WIDTHS
  ======================================================= */

  --container-small: 720px;
  --container-medium: 960px;
  --container-large: 1200px;
  --container-wide: 1440px;

  --page-width: min(
    var(--container-large),
    calc(100% - 48px)
  );

  /* =======================================================
     RESPONSIVE SPACING
  ======================================================= */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  --section-space: clamp(
    56px,
    8vw,
    112px
  );

  --page-padding: clamp(
    16px,
    4vw,
    32px
  );

  /* =======================================================
     TYPOGRAPHY
  ======================================================= */

  --font-primary:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: 3.75rem;

  --heading-1: clamp(
    2.25rem,
    6vw,
    4.75rem
  );

  --heading-2: clamp(
    1.75rem,
    4vw,
    3rem
  );

  --heading-3: clamp(
    1.25rem,
    2.5vw,
    1.75rem
  );

  --body-large: clamp(
    1rem,
    1.5vw,
    1.2rem
  );

  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.65;

  /* =======================================================
     BORDER RADII
  ======================================================= */

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius: 18px;
  --radius-large: 24px;
  --radius-pill: 999px;

  /* =======================================================
     SHADOWS
  ======================================================= */

  --shadow-small:
    0 10px 30px rgba(0, 0, 0, 0.24);

  --shadow:
    0 24px 70px rgba(0, 0, 0, 0.34);

  --shadow-large:
    0 32px 100px rgba(0, 0, 0, 0.46);

  --shadow-blue:
    0 20px 60px rgba(11, 92, 255, 0.22);

  --shadow-gold:
    0 20px 60px rgba(212, 175, 55, 0.2);

  /* =======================================================
     FORM AND BUTTON SIZING
  ======================================================= */

  --control-height: 52px;
  --control-height-small: 44px;

  --button-padding:
    14px 24px;

  --button-padding-small:
    11px 18px;

  /* =======================================================
     TRANSITIONS
  ======================================================= */

  --transition-fast:
    160ms ease;

  --transition:
    260ms ease;

  --transition-slow:
    450ms ease;

  /* =======================================================
     LAYER SYSTEM
  ======================================================= */

  --z-background: -1;
  --z-content: 1;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 1100;

}

/* =========================================================
   TABLET ADJUSTMENTS
========================================================= */

@media (max-width: 992px) {

  :root {

    --page-width:
      min(
        var(--container-medium),
        calc(100% - 36px)
      );

    --section-space:
      clamp(
        48px,
        7vw,
        80px
      );

    --header: 72px;

  }

}

/* =========================================================
   MOBILE ADJUSTMENTS
========================================================= */

@media (max-width: 768px) {

  :root {

    --page-width:
      calc(100% - 28px);

    --page-padding: 14px;

    --section-space:
      48px;

    --header:
      var(--header-mobile);

    --control-height: 50px;

    --radius: 16px;
    --radius-large: 20px;

  }

}

/* =========================================================
   SMALL PHONE ADJUSTMENTS
========================================================= */

@media (max-width: 480px) {

  :root {

    --page-width:
      calc(100% - 20px);

    --page-padding: 10px;

    --section-space:
      40px;

    --button-padding:
      13px 18px;

    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;

  }

}