/* ==========================================================================
   Social Spark Digital Solutions — Design tokens
   Concept: "Daylight spark". A bright, warm ground with the logo's four
   colours used at full saturation as gradients, glows and accents.
   Light theme by design — the brand is approachable, not nocturnal.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Ground ---------------------------------------------------------
     Three levels of light: paper (cards), page (default), tint (bands). */
  --paper:      #ffffff;
  --page:       #fbf8ff;   /* faint lilac cast so white cards lift off it */
  --tint:       #f5efff;   /* alternating section bands */
  --tint-warm:  #fff4f0;   /* warm alternate, used sparingly */
  --line:       #e8e0f5;   /* hairline rules */
  --line-soft:  #f1ecfa;

  /* --- Deep ground (footer, CTA band) ---------------------------------- */
  --deep:       #17102b;
  --deep-2:     #241844;

  /* --- Brand colours (straight off the mark) --------------------------- */
  --magenta: #ff2d8d;
  --violet:  #7c3aed;
  --cyan:    #06b6d4;
  --yellow:  #ffb703;
  --orange:  #ff6b35;
  --mint:    #10b981;

  /* Darkened variants, for coloured text that still passes contrast on
     white. Never set small type in the raw brand colours above. */
  --magenta-ink: #d81b74;
  --violet-ink:  #6d28d9;
  --cyan-ink:    #0e7490;
  --yellow-ink:  #b45309;
  --orange-ink:  #d94f19;
  --mint-ink:    #047857;

  /* --- Type ------------------------------------------------------------ */
  --text:       #1a1230;   /* deep plum-black, never pure black */
  --text-dim:   #574d70;
  --text-faint: #8b83a3;
  --on-dark:      #f6f2ff;
  --on-dark-dim:  #bdb2d8;

  /* --- Semantic -------------------------------------------------------- */
  --accent:     var(--magenta);
  --accent-alt: var(--violet);
  --focus:      var(--violet);

  /* --- Signature gradients --------------------------------------------- */
  --grad-brand:  linear-gradient(115deg, #ff2d8d 0%, #a12ce8 48%, #06b6d4 100%);
  --grad-warm:   linear-gradient(115deg, #ff6b35 0%, #ff2d8d 55%, #a12ce8 100%);
  --grad-cool:   linear-gradient(115deg, #7c3aed 0%, #06b6d4 100%);
  --grad-sun:    linear-gradient(115deg, #ffb703 0%, #ff6b35 60%, #ff2d8d 100%);
  --grad-deep:   linear-gradient(150deg, #241844 0%, #17102b 55%, #2b1150 100%);

  /* --- Families -------------------------------------------------------- */
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* --- Fluid type scale ------------------------------------------------ */
  --t-mono:  clamp(0.6875rem, 0.66rem + 0.12vw, 0.78rem);
  --t--1:    clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);
  --t-0:     clamp(1rem,      0.97rem + 0.16vw, 1.0625rem);
  --t-1:     clamp(1.125rem,  1.07rem + 0.3vw,  1.3125rem);
  --t-2:     clamp(1.375rem,  1.24rem + 0.68vw, 1.875rem);
  --t-3:     clamp(1.75rem,   1.5rem + 1.25vw,  2.625rem);
  --t-4:     clamp(2.125rem,  1.78rem + 1.72vw, 3.25rem);
  --t-5:     clamp(2.5rem,    1.95rem + 2.75vw, 4.5rem);

  /* --- Space ----------------------------------------------------------- */
  --s-1: 0.375rem;
  --s-2: 0.75rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6.5rem;
  --s-8: 9rem;

  /* --- Structure ------------------------------------------------------- */
  --measure: 68ch;
  --shell:   78rem;
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --head-h:  5rem;

  /* Soft and rounded. The old build was all 2px corners, which is a large
     part of why it read as severe. */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-pill: 999px;

  /* Shadows carry a violet cast rather than neutral grey, so cards sit in
     the palette instead of looking like they were dropped onto it. */
  --sh-sm: 0 2px 8px -2px rgba(58, 24, 112, 0.10);
  --sh-md: 0 12px 28px -12px rgba(58, 24, 112, 0.22);
  --sh-lg: 0 28px 60px -24px rgba(58, 24, 112, 0.30);
  --sh-glow: 0 18px 40px -16px rgba(255, 45, 141, 0.45);

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Very light paper grain. Kept far weaker than the previous build — on a
   light ground the same opacity reads as dirt rather than texture. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}