:root {
  /* === BASE === */
  --k-black:       #080808;
  --k-white:       #F5F5F3;
  --k-grey-100:    #111111;
  --k-grey-200:    #1A1A1A;
  --k-grey-300:    #2A2A2A;
  --k-grey-400:    #444444;
  --k-grey-500:    #888888;
  --k-grey-600:    #BBBBBB;

  /* === TEAL === */
  --k-teal:        #0EA5A0;
  --k-teal-deep:   #0891B2;
  --k-teal-light:  #0BC5BF;
  --k-teal-dim:    rgba(14,165,160,0.07);
  --k-teal-dim-md: rgba(14,165,160,0.14);
  --k-teal-glow:   rgba(14,165,160,0.18);

  /* === FONTS === */
  --font-display:  'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'DM Mono', monospace;

  /* === TYPE SCALE === */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   80px;

  /* === SPACING === */
  --s1:   4px;
  --s2:   8px;
  --s3:   12px;
  --s4:   16px;
  --s5:   24px;
  --s6:   32px;
  --s7:   48px;
  --s8:   64px;
  --s9:   96px;
  --s10:  128px;

  /* === LAYOUT === */
  --container:     1120px;
  --container-sm:  720px;
  --radius-sm:     2px;
  --radius-md:     4px;
  --border:        1px solid var(--k-grey-200);

  /* === MOTION === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration:    0.25s;
  --duration-md: 0.45s;
  --duration-lg: 0.7s;

  /* === Z-INDEX === */
  --z-base:    0;
  --z-card:    10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   1000;
}