/* ==========================================================================
   Creative Logo Design — design tokens
   Loaded first in the `cld` layer. Every value the redesign uses lives here.

   Brand hues are inherited from assets/scss/creative.css so the 45 legacy
   service pages keep working:
     --primary-color : #CC067F   --primary-bg : #0D031C   --text-dark : #000
   Those three names are NOT redefined here. Everything below is additive and
   namespaced `--cld-*` so nothing legacy can collide.
   ========================================================================== */

:root {
  /* ---- brand ramp: magenta ------------------------------------------- */
  --cld-magenta-50:  #ffe9f6;
  --cld-magenta-100: #ffc7e7;
  --cld-magenta-200: #ff8ecf;
  --cld-magenta-300: #f95bb6;
  --cld-magenta-400: #e62a9b;
  --cld-magenta-500: #cc067f;   /* brand primary */
  --cld-magenta-600: #a80568;
  --cld-magenta-700: #7f0450;
  --cld-magenta-800: #560335;
  --cld-magenta-900: #30021e;

  /* ---- brand ramp: violet ------------------------------------------- */
  --cld-violet-50:  #f3ecfb;
  --cld-violet-100: #e0cdf5;
  --cld-violet-200: #c4a1ea;
  --cld-violet-300: #a473dd;
  --cld-violet-400: #8449c9;
  --cld-violet-500: #662e91;   /* brand secondary */
  --cld-violet-600: #532678;
  --cld-violet-700: #3f1d5c;
  --cld-violet-800: #2b143f;
  --cld-violet-900: #180b24;

  /* ---- accent: teal (already used by the top-bar icons) -------------- */
  --cld-teal-300: #63e5cb;
  --cld-teal-400: #35dbba;
  --cld-teal-500: #18cfab;
  --cld-teal-600: #0fa88a;

  /* ---- neutrals: near-black canvas ---------------------------------- */
  --cld-ink-950: #07020f;
  --cld-ink-900: #0d031c;   /* brand --primary-bg */
  --cld-ink-850: #140829;
  --cld-ink-800: #1b0f33;
  --cld-ink-700: #271848;
  --cld-ink-600: #3a2963;

  --cld-slate-100: #f7f6fa;
  --cld-slate-200: #ecebf1;
  --cld-slate-300: #d8d6e0;
  --cld-slate-400: #a9a5b8;
  --cld-slate-500: #7c7790;
  --cld-slate-600: #55506a;

  /* ---- semantic surfaces -------------------------------------------- */
  --cld-bg:            var(--cld-ink-900);
  --cld-bg-elevated:   var(--cld-ink-850);
  --cld-bg-light:      #ffffff;
  --cld-bg-light-alt:  var(--cld-slate-100);

  --cld-text:          #ffffff;
  --cld-text-muted:    rgba(255, 255, 255, 0.66);
  --cld-text-faint:    rgba(255, 255, 255, 0.42);
  --cld-text-on-light: #14101c;
  --cld-text-on-light-muted: #55506a;

  /* ---- glass -------------------------------------------------------- */
  --cld-glass-bg:      rgba(255, 255, 255, 0.045);
  --cld-glass-bg-hover:rgba(255, 255, 255, 0.075);
  --cld-glass-border:  rgba(255, 255, 255, 0.11);
  --cld-glass-border-strong: rgba(255, 255, 255, 0.2);
  --cld-glass-blur:    16px;

  --cld-glass-bg-light:     rgba(13, 3, 28, 0.035);
  --cld-glass-border-light: rgba(13, 3, 28, 0.1);

  /* ---- gradients ---------------------------------------------------- */
  --cld-grad-brand:  linear-gradient(97deg, var(--cld-violet-500) 0%, var(--cld-magenta-500) 100%);
  --cld-grad-brand-r:linear-gradient(97deg, var(--cld-magenta-500) 0%, var(--cld-violet-500) 100%);
  --cld-grad-text:   linear-gradient(97deg, #ff6cc0 0%, #b57bff 100%);
  --cld-grad-hairline: linear-gradient(90deg, transparent, var(--cld-glass-border-strong) 18%, var(--cld-glass-border-strong) 82%, transparent);

  /* full-bleed mesh used behind dark sections */
  --cld-mesh:
    radial-gradient(58% 44% at 12% 8%,  rgba(204, 6, 127, 0.30) 0%, transparent 70%),
    radial-gradient(52% 46% at 88% 14%, rgba(102, 46, 145, 0.38) 0%, transparent 72%),
    radial-gradient(46% 40% at 76% 92%, rgba(24, 207, 171, 0.13) 0%, transparent 70%);

  /* subtle film grain — inline SVG, no network request */
  --cld-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  /* ---- typography ---------------------------------------------------- */
  --cld-font-display: Montserrat, "Segoe UI", system-ui, sans-serif;
  --cld-font-body:    Raleway, "Segoe UI", system-ui, sans-serif;

  /* fluid scale — 360px → 1440px viewport */
  --cld-fs-display: clamp(2.75rem, 1.3rem + 6.4vw, 6rem);      /*  44 → 96 */
  --cld-fs-h1:      clamp(2.25rem, 1.25rem + 4.4vw, 4.5rem);   /*  36 → 72 */
  --cld-fs-h2:      clamp(1.875rem, 1.1rem + 3.4vw, 3.5rem);   /*  30 → 56 */
  --cld-fs-h3:      clamp(1.5rem, 1.05rem + 2vw, 2.375rem);    /*  24 → 38 */
  --cld-fs-h4:      clamp(1.25rem, 1rem + 1.1vw, 1.75rem);     /*  20 → 28 */
  --cld-fs-h5:      clamp(1.125rem, 0.98rem + 0.64vw, 1.375rem);
  --cld-fs-lead:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --cld-fs-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --cld-fs-sm:      0.875rem;
  --cld-fs-xs:      0.75rem;

  --cld-lh-tight: 1.05;
  --cld-lh-snug:  1.2;
  --cld-lh-body:  1.65;

  --cld-tracking-tight: -0.02em;
  --cld-tracking-wide:  0.14em;

  /* ---- spacing: 8pt ------------------------------------------------- */
  --cld-space-1: 0.25rem;
  --cld-space-2: 0.5rem;
  --cld-space-3: 0.75rem;
  --cld-space-4: 1rem;
  --cld-space-5: 1.5rem;
  --cld-space-6: 2rem;
  --cld-space-7: 3rem;
  --cld-space-8: 4rem;
  --cld-space-9: 6rem;
  --cld-space-10: 8rem;

  /* vertical rhythm between full sections */
  --cld-section-y: clamp(4rem, 2rem + 8vw, 8.5rem);
  --cld-gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --cld-maxw:      1280px;
  --cld-maxw-text: 62ch;

  /* ---- radii --------------------------------------------------------- */
  --cld-radius-sm:  8px;
  --cld-radius-md:  14px;
  --cld-radius-lg:  22px;
  --cld-radius-xl:  32px;
  --cld-radius-pill: 999px;

  /* ---- elevation ----------------------------------------------------- */
  --cld-shadow-sm: 0 1px 2px rgba(7, 2, 15, 0.28);
  --cld-shadow-md: 0 8px 24px -8px rgba(7, 2, 15, 0.45);
  --cld-shadow-lg: 0 24px 60px -18px rgba(7, 2, 15, 0.6);
  --cld-shadow-glow: 0 12px 44px -12px rgba(204, 6, 127, 0.55);

  /* ---- motion -------------------------------------------------------- */
  --cld-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --cld-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --cld-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --cld-dur-fast:  160ms;
  --cld-dur-base:  280ms;
  --cld-dur-slow:  600ms;

  /* ---- z-index ladder ------------------------------------------------ */
  --cld-z-deco:    0;
  --cld-z-content: 1;
  --cld-z-sticky:  100;
  --cld-z-header:  1030;
  --cld-z-drawer:  1045;
  --cld-z-overlay: 1040;
}

/* Users who ask for less motion get none of the decorative kind. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cld-dur-fast: 1ms;
    --cld-dur-base: 1ms;
    --cld-dur-slow: 1ms;
  }
}