/* ============================================================
   ITWURZEL — Design Tokens (Mintlify Light System)
   Monochrome discipline + single mint green accent.
   Source: design-template/Glcbal-style.css & DESIGN.md
   ============================================================ */

:root {
  /* ── Colors (6 total — no more) ── */
  --color-mint-green:   #0c8c5e;
  --color-ink-black:    #08090a;
  --color-true-black:   #000000;
  --color-paper-white:  #ffffff;
  --color-mist-gray:    #f2f2f2;
  --color-cloud-gray:   #dddddd;

  /* ── Surfaces ── */
  --surface-paper-white: #ffffff;
  --surface-mist-gray:   #f2f2f2;
  --surface-hero-teal:   #0c8c5e;
  --surface-ink-black:   #08090a;

  /* ── Typography — Font Family ── */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── Typography — Scale ── */
  --text-caption:       13px;
  --leading-caption:    1.5;
  --tracking-caption:   0.65px;

  --text-body:          16px;
  --leading-body:       1.5;
  --tracking-body:      -0.16px;

  --text-subheading:    20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.2px;

  --text-heading-sm:    24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.24px;

  --text-heading:       40px;
  --leading-heading:    1.15;
  --tracking-heading:   -0.4px;

  --text-display:       57px;
  --leading-display:    1.1;
  --tracking-display:   -1.14px;

  /* ── Typography — Weights ── */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* ── Spacing ── */
  --spacing-4:   4px;
  --spacing-5:   5px;
  --spacing-6:   6px;
  --spacing-7:   7px;
  --spacing-8:   8px;
  --spacing-10:  10px;
  --spacing-12:  12px;
  --spacing-16:  16px;
  --spacing-24:  24px;
  --spacing-28:  28px;
  --spacing-32:  32px;
  --spacing-48:  48px;
  --spacing-64:  64px;
  --spacing-72:  72px;
  --spacing-96:  96px;
  --spacing-201: 201px;

  /* ── Layout ── */
  --page-max-width: 1200px;
  --section-gap:    80px;
  --card-padding:   24px;
  --element-gap:    12px;

  /* ── Border Radius ── */
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;

  /* Named radii */
  --radius-tags:            4px;
  --radius-cards:           16px;
  --radius-inputs:          4px;
  --radius-buttons:         4px;
  --radius-largecontainers: 24px;

  /* ── Shadows (whisper-quiet, felt not seen) ── */
  --shadow-sm:   0px 2px 4px 0px rgba(0, 0, 0, 0.03);
  --shadow-sm-2: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);

  /* ── Transitions ── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-Index ── */
  --z-base:     1;
  --z-sticky:   200;
  --z-overlay:  300;
}