/* ============================================================
   RYN Design Tokens — nathanielessex.com
   Source: RYN Case Study Website (Figma Community)
   ============================================================ */

:root {

  /* --- Colors --- */
  --bg:            #010208;
  --surface:       #111118;
  --card-bg:       rgba(203, 203, 203, 0.07);
  --card-bg-hover: rgba(203, 203, 203, 0.12);
  --white:         #FFFFFF;
  --gray:          #CBCBCB;
  --accent:        #FF804A;
  --border:        rgba(255, 255, 255, 0.12);
  --border-hover:  rgba(255, 255, 255, 0.40);

  /* --- Fonts --- */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Poppins', sans-serif;

  /* --- Type scale --- */
  --text-hero:    clamp(40px, 7vw, 80px);
  --text-display: clamp(32px, 5vw, 56px);
  --text-h1:      clamp(28px, 4vw, 48px);
  --text-h2:      clamp(24px, 3vw, 40px);
  --text-h3:      clamp(20px, 2.5vw, 32px);
  --text-lead:    18px;
  --text-body:    16px;
  --text-label:   14px;
  --text-small:   12px;

  /* --- Font weights --- */
  --weight-black:   800;
  --weight-bold:    700;
  --weight-semi:    600;
  --weight-regular: 400;

  /* --- Line heights --- */
  --leading-tight:  1.0;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* --- Radius --- */
  --radius-pill:  100px;
  --radius-card:  40px;
  --radius-image: 24px;
  --radius-sm:    8px;
  --radius-xs:    4px;

  /* --- Layout --- */
  --container-max: 1240px;
  --container-pad: clamp(24px, 7vw, 100px);
  --nav-height:    104px;
  --section-gap:   clamp(64px, 8vw, 128px);

  /* --- Spacing --- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* --- Motion --- */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 450ms;
  --transition-card: background var(--duration-base) var(--ease),
                     border-color var(--duration-base) var(--ease),
                     transform var(--duration-base) var(--ease);
}