/* ============================================================
   ARKIPLAN — Design Tokens
   Single source of truth for color, type, spacing, radii, shadows.
   Import as:  <link rel="stylesheet" href="tokens.css">
   ============================================================ */

:root {
  /* ---------- BRAND COLOR ---------- */
  --ark-pink:        #F9346C;  /* Primary. CTAs, highlights, brand marks */
  --ark-pink-deep:   #D01C52;  /* Pressed / hover on light backgrounds */
  --ark-pink-soft:   #FFE3EB;  /* Tinted surfaces, badges, chip fills */

  --ark-mint:        #7AD6C3;  /* Secondary. Support, success, positive state */
  --ark-mint-deep:   #3FA695;  /* Mint on light text, icons on pale bg */
  --ark-mint-soft:   #E2F6F1;  /* Tinted surfaces */

  /* ---------- INK (text + structure) ---------- */
  --ark-ink:         #0E0E10;  /* Near-black. Body text, logo */
  --ark-ink-2:       #2A2A2E;  /* Secondary text */
  --ark-ink-3:       #5B5B63;  /* Tertiary text, meta */
  --ark-ink-4:       #8D8D95;  /* Placeholder, hint */

  /* ---------- PAPER (surfaces) ---------- */
  --ark-paper:       #FFFFFF;  /* Default surface */
  --ark-paper-2:     #FAFAF7;  /* Page background, cards */
  --ark-paper-3:     #F1F1EC;  /* Subtle panels, hover */
  --ark-line:        #E5E5E0;  /* Hairlines, borders */
  --ark-line-strong: #C9C9C2;

  /* ---------- UTILITY ---------- */
  --ark-success:     #3FA695;  /* = mint-deep */
  --ark-warning:     #E8A33A;
  --ark-danger:      #D01C52;  /* = pink-deep */
  --ark-info:        #2F6FE0;

  /* ---------- TYPE ---------- */
  --ark-font-display: 'Cabinet Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --ark-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ark-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — 1.200 minor third, rounded */
  --ark-fs-12: 12px;  /* caption */
  --ark-fs-14: 14px;  /* meta */
  --ark-fs-16: 16px;  /* body */
  --ark-fs-18: 18px;  /* body-lg */
  --ark-fs-22: 22px;  /* lead */
  --ark-fs-28: 28px;  /* h4 */
  --ark-fs-36: 36px;  /* h3 */
  --ark-fs-48: 48px;  /* h2 */
  --ark-fs-64: 64px;  /* h1 */
  --ark-fs-88: 88px;  /* display */

  --ark-lh-tight:   1.05;
  --ark-lh-snug:    1.2;
  --ark-lh-normal:  1.45;
  --ark-lh-loose:   1.65;

  --ark-tracking-tight:  -0.02em;
  --ark-tracking-normal: 0;
  --ark-tracking-wide:   0.08em;

  /* ---------- SPACING (4pt grid) ---------- */
  --ark-s-1:  4px;
  --ark-s-2:  8px;
  --ark-s-3:  12px;
  --ark-s-4:  16px;
  --ark-s-5:  24px;
  --ark-s-6:  32px;
  --ark-s-7:  48px;
  --ark-s-8:  64px;
  --ark-s-9:  96px;
  --ark-s-10: 128px;

  /* ---------- RADIUS ---------- */
  --ark-r-xs:  6px;
  --ark-r-sm:  10px;
  --ark-r-md:  16px;   /* default card */
  --ark-r-lg:  24px;   /* large card */
  --ark-r-xl:  32px;
  --ark-r-pill: 999px;
  --ark-r-icon: 22%;   /* matches brand icon corner */

  /* ---------- SHADOWS ---------- */
  --ark-shadow-xs: 0 1px 2px rgba(14,14,16,0.05);
  --ark-shadow-sm: 0 2px 8px rgba(14,14,16,0.06);
  --ark-shadow-md: 0 8px 24px rgba(14,14,16,0.08);
  --ark-shadow-lg: 0 24px 60px rgba(14,14,16,0.12);
  --ark-shadow-pink: 0 12px 32px rgba(249,52,108,0.28);

  /* ---------- MOTION ---------- */
  --ark-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ark-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ark-dur-fast: 140ms;
  --ark-dur-base: 220ms;
  --ark-dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --ark-container: 1200px;
  --ark-gutter:    24px;
}

/* ---------- TYPE BASE CLASSES ---------- */
.ark-display {
  font-family: var(--ark-font-display);
  font-weight: 700;
  font-size: var(--ark-fs-88);
  line-height: var(--ark-lh-tight);
  letter-spacing: var(--ark-tracking-tight);
}
.ark-h1 { font-family: var(--ark-font-display); font-weight: 700; font-size: var(--ark-fs-64); line-height: var(--ark-lh-tight);   letter-spacing: var(--ark-tracking-tight); }
.ark-h2 { font-family: var(--ark-font-display); font-weight: 700; font-size: var(--ark-fs-48); line-height: var(--ark-lh-tight);   letter-spacing: var(--ark-tracking-tight); }
.ark-h3 { font-family: var(--ark-font-display); font-weight: 600; font-size: var(--ark-fs-36); line-height: var(--ark-lh-snug);    letter-spacing: var(--ark-tracking-tight); }
.ark-h4 { font-family: var(--ark-font-display); font-weight: 600; font-size: var(--ark-fs-28); line-height: var(--ark-lh-snug);    letter-spacing: -0.01em; }
.ark-lead { font-family: var(--ark-font-body); font-weight: 400; font-size: var(--ark-fs-22); line-height: var(--ark-lh-normal); color: var(--ark-ink-2); }
.ark-body { font-family: var(--ark-font-body); font-weight: 400; font-size: var(--ark-fs-16); line-height: var(--ark-lh-normal); color: var(--ark-ink); }
.ark-body-lg { font-family: var(--ark-font-body); font-weight: 400; font-size: var(--ark-fs-18); line-height: var(--ark-lh-normal); color: var(--ark-ink); }
.ark-meta { font-family: var(--ark-font-body); font-weight: 500; font-size: var(--ark-fs-14); line-height: var(--ark-lh-normal); color: var(--ark-ink-3); }
.ark-caption { font-family: var(--ark-font-body); font-weight: 500; font-size: var(--ark-fs-12); line-height: var(--ark-lh-normal); color: var(--ark-ink-3); text-transform: uppercase; letter-spacing: var(--ark-tracking-wide); }
.ark-mono { font-family: var(--ark-font-mono); font-size: var(--ark-fs-14); }

/* Convenience underline-accent used across marketing pages */
.ark-accent-underline {
  background-image: linear-gradient(transparent 62%, var(--ark-pink) 62%, var(--ark-pink) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .04em;
}