/* ==========================================================================
   SINC — design tokens.
   Brand magenta (#c3317d) carried over from the existing sinc.studio site.
   Load this BEFORE site.css on every page.
   ========================================================================== */
:root {
  /* ---- Brand ramp ---- */
  --magenta-50:  #fdf2f8;
  --magenta-100: #fce7f3;
  --magenta-200: #f9cfe4;
  --magenta-300: #f0a6cb;
  --magenta-400: #e070ac;
  --magenta-500: #d94a95;
  --magenta-600: #c3317d;
  --magenta-700: #9d2764;
  --magenta-800: #7a1e4e;

  --primary:       var(--magenta-600);
  --primary-hover: var(--magenta-700);

  /* ---- Ink ramp ---- */
  --ink-50:  #f7f8fa;
  --ink-100: #eef0f4;
  --ink-200: #e0e4ea;
  --ink-300: #c6ccd6;
  --ink-400: #99a1b0;
  --ink-500: #6f7787;
  --ink-600: #515866;
  --ink-700: #3a404b;
  --ink-800: #262b34;
  --ink-900: #18202c;

  /* ---- Surfaces ---- */
  --surface:            #ffffff;
  --surface-muted:      var(--ink-50);
  --surface-sunken:     var(--ink-100);
  --surface-brand-soft: var(--magenta-50);

  /* ---- Text ---- */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-500);
  --text-brand:     var(--magenta-600);

  /* ---- Borders ---- */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--magenta-200);

  /* ---- Glass (sticky nav) ---- */
  --glass-bg:   rgba(255, 255, 255, 0.78);
  --blur-glass: saturate(180%) blur(14px);

  /* ---- Type scale ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight:   1.08;
  --leading-snug:    1.32;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.011em;
  --tracking-caps:     0.08em;

  /* ---- Spacing & layout ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --container-max: 1160px;
  --container-pad: 24px;
  --section-gap:   clamp(3.5rem, 7vw, 6rem);

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(24, 32, 44, 0.05);
  --shadow-sm: 0 1px 3px rgba(24, 32, 44, 0.06), 0 1px 2px rgba(24, 32, 44, 0.04);
  --shadow-md: 0 4px 12px rgba(24, 32, 44, 0.07), 0 2px 4px rgba(24, 32, 44, 0.04);
  --shadow-lg: 0 12px 28px rgba(24, 32, 44, 0.09), 0 4px 8px rgba(24, 32, 44, 0.04);
  --shadow-xl: 0 24px 56px rgba(24, 32, 44, 0.12), 0 8px 16px rgba(24, 32, 44, 0.05);
  --shadow-brand: 0 8px 22px rgba(195, 49, 125, 0.28);

  --focus-ring: 0 0 0 3px rgba(195, 49, 125, 0.35);

  /* ---- Motion ---- */
  --dur-fast:   120ms;
  --dur-normal: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}