/* ==========================================================================
   Design Tokens - Studio Node Website
   Extracted from Figma: Desktop - 3 (node-id: 2065:893)
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Colors
     ------------------------------------------------------------------------- */

  /* Primary Brand Colors */
  --color-node-orange: #ff7f19;
  --color-digital-sky: #69e5ff;
  --color-laguna: #11decd;
  --color-citra: #e5fc2f;

  /* Neutral Colors */
  --color-opal-white: #f6fffc;
  --color-white: #ffffff;
  --color-ink-black: #000000;
  --color-placeholder: #d9d9d9;

  /* Gradient Colors */
  --color-gradient-start: #ffffff;
  --color-gradient-yellow-light: #f9fecb;
  --color-gradient-yellow: #f2fd97;
  --color-gradient-mint: #aef1cb;
  --color-gradient-aqua: #8bebe5;
  --color-gradient-sky: #69e5ff;
  --color-gradient-teal-light: #3de2e6;
  --color-gradient-teal-mid: #27e0da;
  --color-gradient-teal: #11decd;

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */

  /* Font Families */
  --font-proxima: "proxima-nova", sans-serif;
  --font-rooney: "rooney-sans", sans-serif;

  /* Font Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Font Sizes - Desktop */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 24px;
  --font-size-lg: 32px;
  --font-size-xl: 46px;
  --font-size-2xl: 54px;

  /* Line Heights */
  --line-height-tight: 0.84;
  --line-height-snug: 0.97;
  --line-height-normal: 1;
  --line-height-relaxed: 39px;
  --line-height-heading: 57px;

  /* Letter Spacing */
  --letter-spacing-tight: -1.62px;
  --letter-spacing-normal: -0.92px;
  --letter-spacing-wide: 0.46px;
  --letter-spacing-wider: 0.96px;

  /* -------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------- */
  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 24px;
  --space-lg: 33px;
  --space-xl: 50px;
  --space-2xl: 126px;

  /* -------------------------------------------------------------------------
     Border Radius
     ------------------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-card: 25px;
  --radius-md: 50px;
  --radius-lg: 72px;

  /* -------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------- */
  --shadow-button: 1px 5px 29.6px 0px rgba(255, 255, 255, 0.72);
  --shadow-squiggly: 0px 4px 0px 0px var(--color-node-orange);
  --shadow-dim-gray: 0px 4px 4px 2px rgba(155, 155, 155, 0.1);
  --shadow-card-image: -6px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-card-caption: 0px -4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  /* blur + spread */

  /* Text Shadows */
  --text-shadow-hero: 2px 2px 0px #6ae5fe;
  --text-shadow-heading: 2px 2px 0px var(--color-digital-sky);
  --text-shadow-section: 2px 2px 0px var(--color-laguna);
  --text-shadow-created: 2px 2px 0px var(--color-citra);
  --text-shadow-dim-gray: 1px 1px 0px rgba(105, 105, 105, 0.5);
  /* opacity */


  /* -------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------- */
  --container-max-width: 1440px;
  --nav-height: 66px;
  --hero-height: 621px;
  --footer-height: 144px;

  /* -------------------------------------------------------------------------
     Breakpoints (for reference in media queries)
     ------------------------------------------------------------------------- */
  --breakpoint-mobile: 390px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1440px;

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* -------------------------------------------------------------------------
     Animation Settings
     ------------------------------------------------------------------------- */
  --scroll-speed: 60s;

  @media (max-width: 768px) {
    --scroll-speed: 90s;
  }

  /* -------------------------------------------------------------------------
     Z-Index Scale
     ------------------------------------------------------------------------- */
  --z-background: -1;
  --z-default: 1;
  --z-nav: 100;
  --z-modal: 1000;
}