/*
 * BacklinkSumo + Loop — canonical design tokens.
 *
 * Single source of truth for color, type, spacing, radius, shadow, motion.
 * Imported by every HTML file in /public via:
 *
 *   <link rel="stylesheet" href="/tokens.css">
 *
 * No HTML file should redefine these in an inline :root block. If you need
 * a new value, add it here first — invented numbers inside component CSS
 * are bugs, not extensibility.
 *
 * Source of decisions: docs/design/foundations.md.
 */

:root {
  /* ============================================================
     COLOR — INK + GRAYSCALE
     ============================================================ */
  --ink:           #0f1623;
  --ink-soft:      #404a5e;
  --muted:         #6b7280;
  --line:          #e5e7eb;
  --line-soft:     #f0f2f5;
  --bg:            #ffffff;
  --bg-soft:       #f8f9fb;
  --bg-sunk:       #f1f3f7;

  /* Soft cream-green page surface. Replaces the cool white --bg as the
     body background; the white --bg stays as the canonical card surface. */
  --bg-cream:      #f3fcef;

  /* ============================================================
     COLOR — BRAND ACCENT (light green, Sumit-locked)
     ============================================================ */
  --accent:        #22c55e;   /* Tailwind green-500 */
  --accent-soft:   #e8f8ee;
  --accent-ink:    #16a34a;   /* hover; Tailwind green-600 */

  /* Tertiary accent — used sparingly. Currently only the third hero
     floating card ("Content Gaps") to break the all-green monotony. */
  --tertiary:      #9e4036;
  --tertiary-soft: #ffdad5;

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --ok:            #16a34a;
  --ok-soft:       #e8f8ee;
  --warn:          #b45309;
  --warn-soft:     #fef5e2;
  --danger:        #c53030;
  --danger-soft:   #fdecec;

  /* ============================================================
     TYPE
     ============================================================ */
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* Type scale — 5 product styles + 1 marketing mega.
     --type-mega is marketing-only; never use in product UI. */
  --type-mega:     64px;
  --type-display:  44px;
  --type-h1:       28px;
  --type-h2:       19px;
  --type-body:     15px;
  --type-small:    13px;

  --leading-mega:    1.04;
  --leading-display: 1.08;
  --leading-h1:      1.2;
  --leading-h2:      1.3;
  --leading-body:    1.55;
  --leading-small:   1.45;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  /* ============================================================
     SPACING — 4px base, multiples only
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ============================================================
     RADIUS — two values total
     ============================================================ */
  --radius-sm: 6px;    /* inputs, buttons, chips, badges */
  --radius-md: 10px;   /* cards, modals, panels */

  /* ============================================================
     SHADOW
     ============================================================ */
  --shadow:    0 16px 40px rgba(15, 25, 50, 0.10),
               0 4px 12px  rgba(15, 25, 50, 0.06);
  /* Slightly heavier — used for modals and floating overlays only. */
  --shadow-lg: 0 16px 40px rgba(15, 25, 50, 0.12),
               0 4px 12px  rgba(15, 25, 50, 0.06);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease:           cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:  120ms;
  --duration-base:  200ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --content-max:    1080px;
  --content-narrow: 880px;
  --content-wide:   1180px;   /* hero stage outer width — floating cards sit in the gutter */
  --article-max:    720px;
  --sidebar-w:      260px;
  --topbar-h:       56px;

  /* ============================================================
     HERO STAGE — backgrounds + floating preview cards
     ============================================================ */
  /* Lighter shadow for floating product cards in the hero gutter.
     The canonical --shadow above is for primary modals/cards; this
     one is for low-emphasis decorative cards that must not steal
     focus from the form. */
  --shadow-card:   0 4px 12px rgba(15, 25, 50, 0.06),
                   0 1px 3px  rgba(15, 25, 50, 0.04);

  /* Cool, near-imperceptible grid line for the .hero-stage 40px grid.
     Tinted toward ink, not toward accent green, so the grid reads as
     "structured background" not "brand wash". */
  --grid-line:     rgba(15, 25, 50, 0.045);

  /* Tilt budget for floating preview cards. Strictly -3deg to +3deg —
     anything more reads as Webflow template. */
  --tilt-neg-sm:   -2deg;
  --tilt-pos-sm:    2deg;
  --tilt-neg-md:   -3deg;
  --tilt-pos-md:    3deg;
}