/* ============================================================
   Toucan — design tokens
   Apple-inspired: deep ink fields, generous space, one warm
   toucan-beak accent used sparingly against restrained neutrals.
   ============================================================ */

:root {
  /* ---- Color: neutrals (the dominant field) ---- */
  --ink:        #08080a;   /* near-black hero / footer */
  --ink-2:      #101013;   /* raised dark surface */
  --ink-line:   rgba(255, 255, 255, 0.10);

  --paper:      #ffffff;   /* light sections */
  --paper-2:    #f5f5f7;   /* Apple-grey light surface */
  --paper-line: rgba(0, 0, 0, 0.08);

  /* ---- Text ---- */
  --text-on-dark:        #f5f5f7;
  --text-on-dark-soft:   rgba(245, 245, 247, 0.62);
  --text-on-light:       #1d1d1f;
  --text-on-light-soft:  #6e6e73;

  /* ---- Accent: the toucan beak ---- */
  --beak-1: #ffb020;
  --beak-2: #ff7a18;
  --beak-3: #ff2d78;
  --beak-4: #a21caf;
  --accent: var(--beak-2);
  --accent-grad: linear-gradient(100deg, var(--beak-1), var(--beak-2) 42%, var(--beak-3) 82%, var(--beak-4));

  /* ---- Typography ---- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial,
    "PingFang SC", "PingFang TC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --text-eyebrow: 0.8125rem;
  --text-body:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --text-lede:    clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --text-h3:      clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --text-h2:      clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  --text-hero:    clamp(2.9rem, 1.1rem + 7.2vw, 6.6rem);

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  /* ---- Spacing rhythm ---- */
  --shell-max:    1180px;
  --shell-pad:    clamp(1.25rem, 1rem + 3vw, 3.5rem);
  --section-pad:  clamp(5rem, 3rem + 9vw, 11rem);

  /* ---- Radius / surface ---- */
  --radius-sm: 10px;
  --radius:    20px;
  --radius-lg: 32px;
  --shadow-soft: 0 30px 80px -40px rgba(0, 0, 0, 0.5);

  /* ---- Motion ---- */
  --dur-fast:   180ms;
  --dur:        420ms;
  --dur-slow:   760ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 60px;
}