/* ============================================
   Noor — Design tokens (source: DESIGN_SYSTEM.md)
   ============================================ */

:root {
  /* --- Accent swatches --- */
  --accent-blue:   #2865FF;
  --accent-pink:   #E6165D;
  --accent-yellow: #FAB102;

  /* --- Accent active (set dynamically via helper) --- */
  --accent-current: var(--accent-blue);

  /* --- Accent derivados --- */
  --accent-ink:   #fff;
  --accent-soft:  color-mix(in srgb, var(--accent-current) 25%, transparent);
  --accent-link:  var(--accent-current);
  --accent-focus: var(--accent-current);

  /* --- Typography: families --- */
  --font-body: "Teachers", system-ui, -apple-system, sans-serif;
  --font-ui:   var(--font-body);

  --font-display-a: "Newsreader", serif;
  --font-display-b: "Instrument Serif", serif;
  --font-display-current: var(--font-display-a);

  /* --- Typography: fluid scale (Koto-like) --- */
  --text-display: clamp(3rem, 6vw + 1rem, 6.875rem);      /* 48px → 110px */
  --text-h1:      clamp(1.75rem, 3vw + 0.5rem, 2.75rem);  /* 28px → 44px */
  --text-h2:      clamp(1.25rem, 2vw + 0.25rem, 1.75rem); /* 20px → 28px */
  --text-h3:      clamp(1rem, 1vw + 0.5rem, 1.25rem);     /* 16px → 20px */
  --text-body:    clamp(0.875rem, 0.5vw + 0.75rem, 1rem); /* 14px → 16px */
  --text-small:   clamp(0.75rem, 0.25vw + 0.7rem, 0.875rem); /* 12px → 14px */
  --text-xs:   clamp(0.6rem, 0.20vw + 0.6rem, 0.75rem); /* 9px → 11px */

  /* --- Surfaces --- */
  --surface-bg:   #0e0e0e;
  --surface-text: #fff;

  /* --- Layout: containers (Apple-like) --- */
  --gutter:      clamp(1rem, 2.5vw, 2.5rem);  /* 16px → 40px */
  --content-max: 1120px;
  --wide-max:    1600px;
  --nav-height:  56px;

  /* --- Spacing: vertical rhythm (fluid) --- */
  --space-xs:  clamp(0.5rem, 1vw, 1rem);       /* 8px → 16px */
  --space-sm:  clamp(1rem, 2vw, 1.5rem);       /* 16px → 24px */
  --space-md:  clamp(1.5rem, 3vw, 2.5rem);     /* 24px → 40px */
  --space-lg:  clamp(2.5rem, 5vw, 5rem);       /* 40px → 80px */
  --space-xl:  clamp(4rem, 8vw, 7.5rem);       /* 64px → 120px */
  --space-2xl: clamp(6rem, 10vw, 10rem);       /* 96px → 160px */
}