/* =========================================================================
   Instagram Hub — Design Tokens
   Single source of truth. Maps 1:1 to your Laravel/Tailwind design tokens.
   ========================================================================= */

:root {
  /* ---- Type families ---- */
  --font-sans: "Helvetica Neue", "Helvetica", "Arial Nova", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (1.200 minor third, 16px base) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.08em;

  /* ---- Neutrals (cool white -> slate ink) ---- */
  --bg:          oklch(0.994 0.002 250);   /* page */
  --bg-subtle:   oklch(0.978 0.004 250);   /* alternating sections */
  --surface:     #ffffff;                  /* cards */
  --surface-2:   oklch(0.985 0.003 250);   /* nested fills */

  --border:        oklch(0.918 0.005 255);
  --border-strong: oklch(0.86 0.006 255);

  --ink:        oklch(0.235 0.012 262);    /* primary text */
  --ink-2:      oklch(0.44 0.011 262);     /* secondary text */
  --ink-3:      oklch(0.595 0.01 262);     /* muted / meta */
  --ink-inverse:#ffffff;

  /* ---- Accent (calm trust blue) ---- */
  --accent:        oklch(0.555 0.205 264);  /* ~#2563eb */
  --accent-hover:  oklch(0.49 0.2 264);
  --accent-press:  oklch(0.44 0.18 264);
  --accent-soft:   oklch(0.955 0.03 264);   /* tinted fill */
  --accent-soft-2: oklch(0.92 0.05 264);
  --accent-ink:    oklch(0.46 0.2 264);     /* accent text on light */
  --ring:          oklch(0.555 0.205 264 / 0.35);

  /* ---- Semantic status ---- */
  --ok:        oklch(0.62 0.14 156);
  --ok-soft:   oklch(0.955 0.035 156);
  --ok-ink:    oklch(0.46 0.12 156);

  --warn:      oklch(0.74 0.15 72);
  --warn-soft: oklch(0.96 0.045 80);
  --warn-ink:  oklch(0.55 0.12 66);

  --danger:      oklch(0.585 0.21 26);
  --danger-soft: oklch(0.96 0.035 26);
  --danger-ink:  oklch(0.51 0.2 26);

  /* ---- Instagram nod (used ONLY in logo glyph + Connect button) ---- */
  --ig-gradient: linear-gradient(45deg, #f9a826 2%, #f06b3e 24%, #e23267 52%, #cc2a86 74%, #8a3ab9 100%);

  /* ---- Spacing scale (4px base) ---- */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- Elevation (low, diffuse — dev-tool calm) ---- */
  --shadow-xs: 0 1px 2px oklch(0.4 0.02 262 / 0.06);
  --shadow-sm: 0 1px 2px oklch(0.4 0.02 262 / 0.05), 0 2px 6px oklch(0.4 0.02 262 / 0.05);
  --shadow-md: 0 2px 4px oklch(0.4 0.02 262 / 0.05), 0 8px 24px oklch(0.4 0.02 262 / 0.08);
  --shadow-lg: 0 4px 8px oklch(0.4 0.02 262 / 0.05), 0 18px 48px oklch(0.4 0.02 262 / 0.10);

  /* ---- Layout ---- */
  --container: 1120px;
  --container-narrow: 760px;
  --header-h: 64px;
}