/* ==========================================================================
   Social Mania — Design Tokens
   Single source of truth for colors, type, spacing, etc.
   Change a value here and it updates everywhere.
   ========================================================================== */

:root {
  /* ---- Color: surfaces (DARK theme) ---- */
  --bg-cream:    #0D0D0F;   /* main background — near-black */
  --bg-cream-2:  #161618;   /* alternate section background */
  --bg-dark:     #000000;   /* darkest blocks / footer */
  --white:       #FFFFFF;

  /* ---- Color: text ---- */
  --ink:         #F4F3EF;   /* headings / body — off-white */
  --ink-soft:    #ABA9A3;   /* muted / secondary text */
  --ink-faint:   #6C6A65;   /* captions, labels */
  --on-dark:     #F4F3EF;   /* text on dark blocks */
  --on-dark-soft:#ABA9A3;   /* muted text on dark blocks */
  --on-accent:   #0D0D0F;   /* text on the yellow accent */

  /* ---- Color: accent ----
     Default = coral/persimmon. Alt palettes below (swap the 3 vars to switch).
     Coral   #F0502F / hover #D63E20 / soft #FBD3C7
     Blue    #2B4EF0 / hover #1E3BC7 / soft #C9D3FB
     Emerald #0E8F6E / hover #0A7458 / soft #BCE6DA
     Violet  #6B3FE4 / hover #5730C4 / soft #D8CCF7
     Gold    #C08A3E / hover #A87430 / soft #E7D3AE  */
  /* Brand palette — from the logo (blue + gold) */
  --brand-blue:  #2563EB;
  --brand-blue-2:#5B8DEF;
  --brand-gold:  #E3A81E;
  --brand-gold-2:#F0C24D;

  /* Vibrant accents (colourful, socialmafia-style) */
  --neon-green:  #B9F73E;
  --neon-pink:   #FF2E88;
  --neon-cyan:   #21D4E0;

  --accent:      #E3A81E;   /* gold — primary buttons, highlights */
  --accent-hover:#C9911A;   /* darker gold for hover */
  --accent-soft: #2A2205;   /* deep gold tint */

  /* ---- Color: lines ---- */
  --line:        #2A2A2D;   /* borders / dividers — subtle on near-black */
  --line-dark:   #2A2A2D;   /* borders on dark blocks */

  /* ---- Typography ---- */
  --font-display: "Archivo", system-ui, sans-serif;  /* headings — heavy grotesque */
  --font-body:    "Rubik", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Fluid type scale (min → max via clamp) */
  --fs-hero:   clamp(2.75rem, 6vw + 1rem, 6rem);   /* giant hero headline */
  --fs-h1:     clamp(2.25rem, 4vw + 1rem, 4rem);
  --fs-h2:     clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3:     clamp(1.3rem, 1.2vw + 0.9rem, 1.7rem);
  --fs-lead:   clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);  /* intro paragraphs */
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-label:  0.75rem;   /* uppercase eyebrow labels */

  --lh-tight:  1.05;
  --lh-heading:1.15;
  --lh-body:   1.65;

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

  /* Vertical rhythm for page sections (fluid) */
  --section-y: clamp(3.5rem, 7vw, 8rem);

  /* ---- Layout ---- */
  --container:      1240px;  /* standard max width */
  --container-wide: 1440px;
  --container-narrow: 820px; /* readable text column */
  --gutter: clamp(1.25rem, 4vw, 3rem);  /* left/right page padding */

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(20, 17, 15, 0.06);
  --shadow:    0 12px 32px rgba(20, 17, 15, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 17, 15, 0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur:      0.35s;
  --dur-slow: 0.6s;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}