/* ==========================================================================
   Uniy Designz — design tokens
   The single source for color, type, spacing, shape, elevation, and motion.
   Shared verbatim with admin.uniydesignz.com (see scripts/sync-shared-assets.js).

   Colors are referenced from the approved logo
   (brand-assets/uniydesignz-logo.png). Base values are the logo's mid-tones;
   -dark values are its shaded tones and are the ones to use for text and for
   white-on-color fills (WCAG AA on white). Teal and gold base values are
   below AA for body text on white: use them for accents, rules, and icons.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --brand-teal: #008D9D;
  --brand-teal-dark: #035E79;
  --brand-teal-tint: #E6F4F5;
  --brand-magenta: #C51A78;
  --brand-magenta-dark: #99064D;
  --brand-magenta-tint: #FBEAF3;
  --brand-purple: #66216F;
  --brand-purple-dark: #4B004F;
  --brand-purple-tint: #F2EAF3;
  --brand-gold: #C68A36;
  --brand-gold-dark: #8A5A17;
  --brand-gold-light: #E3C08C;
  --brand-gold-tint: #FAF3E8;
  --brand-gold-gradient: linear-gradient(100deg, #B87A2C 0%, #E3C08C 50%, #B87A2C 100%);

  /* ---- Surfaces & text -------------------------------------------------- */
  --background-primary: #FFFFFF;
  --background-secondary: #F8F9FB;
  --background-tertiary: #F1F2F5;
  --background-inverse: #20212A;

  --text-primary: #20212A;
  --text-secondary: #646875;
  --text-muted: #8A8E99;
  --text-inverse: #FFFFFF;
  --text-link: var(--brand-magenta-dark);

  --border-color: #E6E8EC;
  --border-strong: #CDD0D6;

  /* ---- Semantic --------------------------------------------------------- */
  --color-success: #1E7A4C;
  --color-success-tint: #E8F5EE;
  --color-warning: #8A5A17;
  --color-warning-tint: #FDF5E6;
  --color-danger: #B42318;
  --color-danger-tint: #FDECEA;
  --color-info: var(--brand-teal-dark);
  --color-info-tint: var(--brand-teal-tint);

  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--brand-teal-dark);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: clamp(22px, 2.2vw, 26px);
  --text-3xl: clamp(26px, 3vw, 34px);
  --text-4xl: clamp(32px, 4.4vw, 48px);
  --text-5xl: clamp(36px, 5.6vw, 60px);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-caps: 0.12em;

  /* ---- Spacing (8px scale, with 4px half-steps) ------------------------- */
  --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;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(32, 33, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(32, 33, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(32, 33, 42, 0.12);

  /* ---- Layers ----------------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1280px;
  --container-gutter: 16px;

  /* ---- Legacy aliases ----------------------------------------------------
     Used by pages that predate this token file (styles in legacy.css).
     Prefer the names above in new code; remove once legacy.css is gone. */
  --brand-pink: var(--brand-magenta);
  --brand-pink-dark: var(--brand-magenta-dark);
  --brand-pink-light: #F3C6DD;
  --brand-lavender: #D9C7DD;
  --brand-ink: var(--text-primary);
  --brand-ink-soft: var(--text-secondary);
  --brand-cream: var(--background-primary);
  --brand-cream-deep: var(--background-secondary);
  --brand-white: var(--background-primary);
  --brand-border: var(--border-color);
  --brand-gradient: linear-gradient(135deg, #E3F2F3 0%, #F1E8F2 50%, #FBE8F1 100%);
  --brand-gradient-text: linear-gradient(100deg, var(--brand-teal-dark) 0%, var(--brand-magenta) 60%, var(--brand-purple) 100%);
}

@media (min-width: 640px) {
  :root { --container-gutter: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}