/* Moslim Vrijwilliger — Design Tokens
   Derived from the official logo (Moslimvrijwilliger Logo.svg) and character artwork.
   Vibrant, cartoon-sticker aesthetic: bold outlines, punchy colors, chunky display type.
*/

:root {
  /* ── Brand palette (pulled from logo) ──────── */
  --c-blue:       #1C3FAA;   /* royal blue — "Moslim" wordmark outline */
  --c-blue-dark:  #152E7D;
  --c-blue-soft:  #D3DDF5;

  --c-lime:       #A8E100;   /* electric lime — "Vrijwilliger" outline, URL pill */
  --c-lime-dark:  #7AAF00;
  --c-lime-soft:  #EEFBC3;

  --c-pink:       #EC2887;   /* hot pink — heart center, highlights */
  --c-pink-dark:  #BE1D6D;
  --c-pink-soft:  #FCD0E2;

  --c-yellow:     #FFD83D;   /* sunshine yellow — Omar, Miryam clothing */
  --c-yellow-dark:#D9A800;
  --c-yellow-soft:#FFF1B5;

  --c-teal:       #00B8C6;   /* aqua/teal accent */
  --c-teal-soft:  #C7F0F3;

  --c-purple:     #8E4AC4;   /* purple — Aziyme hijab */
  --c-purple-soft:#E1D0F0;

  --c-coral:      #FF5B5B;   /* pink/coral — Esmee outfit */
  --c-coral-soft: #FFD4D4;

  /* ── Ink & surfaces ────────────────────────── */
  --c-ink:        #0D1B2A;   /* near-black outline color (instead of pure black) */
  --c-ink-80:    rgba(13, 27, 42, 0.80);
  --c-ink-60:    rgba(13, 27, 42, 0.60);
  --c-ink-40:    rgba(13, 27, 42, 0.40);
  --c-ink-20:    rgba(13, 27, 42, 0.20);
  --c-ink-10:    rgba(13, 27, 42, 0.10);

  --c-cream:      #FFF9E8;   /* page background — warmer than pure white */
  --c-cream-alt:  #FFF2D1;   /* alternating section */
  --c-surface:    #FFFFFF;   /* cards (pure white works with bold outlines) */

  /* ── Text ──────────────────────────────────── */
  --c-text:       var(--c-ink);
  --c-text-muted: var(--c-ink-60);
  --c-text-subtle:var(--c-ink-40);

  /* ── Status ────────────────────────────────── */
  --c-error:      #E22B2B;
  --c-success:    var(--c-lime-dark);
  --c-warning:    var(--c-yellow-dark);

  /* ── Typography ────────────────────────────── */
  /* Display: Titan One — chunky sticker-y feel that echoes the logo wordmark */
  --font-display: 'Titan One', 'Sigmar', 'Luckiest Guy', 'Fredoka', system-ui, sans-serif;
  /* Body: Nunito — rounded, friendly, great Latin + diacritics */
  --font-body:    'Nunito', 'Poppins', system-ui, -apple-system, sans-serif;

  /* Back-compat aliases for unupdated rules */
  --font-sans:    var(--font-body);

  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.25rem);
  --fs-h2: clamp(1.875rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --fs-h4: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-button: 0.9375rem;
  --fs-tag: 0.75rem;
  --fs-nav: 0.9375rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 700;
  --fw-bold: 800;
  --fw-black: 900;

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

  /* ── Radius ────────────────────────────────── */
  --r-pill: 999px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-hero: 32px;

  /* Legacy aliases */
  --radius-pill: var(--r-pill);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-hero: var(--r-hero);

  /* ── Outline & shadow (the "sticker" look) ─── */
  --stroke-w: 2.5px;
  --stroke-w-thick: 4px;
  --stroke: var(--stroke-w) solid var(--c-ink);
  --stroke-thick: var(--stroke-w-thick) solid var(--c-ink);

  --shadow-sticker: 4px 5px 0 0 var(--c-ink);         /* buttons, pills */
  --shadow-card:    6px 7px 0 0 var(--c-ink);         /* cards */
  --shadow-hero:    10px 12px 0 0 var(--c-ink);       /* big statement elements */

  /* ── Spacing (8px) ─────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 80px;
  --s-9: 112px;

  /* Legacy aliases */
  --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3);
  --space-4: var(--s-4); --space-5: var(--s-5); --space-6: var(--s-6);
  --space-7: var(--s-7); --space-8: var(--s-8);

  /* Back-compat color aliases used across pages */
  --color-primary: var(--c-blue);
  --color-primary-dark: var(--c-blue-dark);
  --color-secondary: var(--c-yellow);
  --color-accent-coral: var(--c-coral);
  --color-accent-purple: var(--c-purple);
  --color-bg: var(--c-cream);
  --color-bg-mint: var(--c-lime-soft);
  --color-surface: var(--c-surface);
  --color-text: var(--c-text);
  --color-text-muted: var(--c-text-muted);
  --color-text-subtle: var(--c-text-subtle);
  --color-border: var(--c-ink-20);
  --color-border-strong: var(--c-ink-40);
  --color-error: var(--c-error);
  --color-info: var(--c-teal);
  --color-success-bg: var(--c-lime-soft);
  --color-warning-bg: var(--c-yellow-soft);

  /* ── Layout ────────────────────────────────── */
  --content-max: 1200px;
  --content-narrow: 760px;
  --gutter: 24px;
  --gutter-mobile: 16px;

  /* ── Motion ────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ── Focus ─────────────────────────────────── */
  --focus-ring: 0 0 0 4px var(--c-yellow), 0 0 0 6px var(--c-ink);
}