/*
 * 01-tokens.css – Tokens: färger (från Customizer), typsnitt, storlekar, mått
 * Del av child-temat Haninge Grav. Se README.md.
 */

/* ==========================================================================
   Tokens
   Färgerna ställs in i GeneratePress Global Colors
   (Appearance → Customize → Colors) med dessa slugs:
   primary, primary-dark, primary-light, secondary, secondary-light,
   text, text-muted, text-light, background, background-alt, surface,
   border, on-primary
   Värdena efter kommatecknet är reserv om en färg saknas.

   Mörkt tema: background är nästan svart, text är vit,
   primary är den gula accentfärgen.
   ========================================================================== */
:root {
  --hg-accent:          var(--primary,         #FFB800);  /* gul accent, knappar */
  --hg-accent-hover:    var(--primary-dark,    #E6A600);  /* hover på gula knappar */
  --hg-accent-tint:     var(--primary-light,   #2B2309);  /* gul ton på mörkt (hover-plattor) */
  --hg-secondary:       var(--secondary,       #FF6B00);  /* orange, sparsamt */
  --hg-secondary-light: var(--secondary-light, #FF9A4D);
  --hg-fg:              var(--text,            #FFFFFF);  /* rubriker och text */
  --hg-fg-muted:        var(--text-muted,      #C1C1C2);  /* brödtext, ingress */
  --hg-fg-subtle:       var(--text-light,      #8A8A90);  /* etiketter, småtext */
  --hg-bg:              var(--background,      #060608);  /* sidans bakgrund */
  --hg-bg-alt:          var(--background-alt,  #0D0D11);  /* alternerande sektion */
  --hg-surface:         var(--surface,         #16161B);  /* kort, dropdowns */
  --hg-border:          var(--border,          #2A2A32);  /* ramar */
  --hg-on-accent:       var(--on-primary,      #060608);  /* text på gul yta */

  /* Härledda toner – stämmer med paletten, inte i färgväljaren */
  --hg-light-bg:        #F5F5F2;  /* ljus sektion/kort */
  --hg-light-fg:        #0D0D11;
  --hg-light-muted:     #44444C;
  --hg-light-border:    #E2E2DC;
  --hg-input-line:      #6B6B76;  /* formulärfält, minst 3:1 mot mörk bakgrund */
  --hg-divider:         #22222A;  /* avdelare inne i kort */
  --hg-ph-bg:           #16161B;  /* bildplatshållare */
  --hg-ph-line:         #3A3A44;
  --hg-ph-text:         #8A8A90;

  /* Typsnitt – laddas lokalt via GP Premium → Font Library */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Storlekar */
  --fs-h1: clamp(40px, 5.2vw, 72px);
  --fs-h2: clamp(30px, 3.4vw, 46px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 14px;

  /* Mått */
  --container: 1340px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 120px);
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-xl: 18px;
  --shadow-float: 0 16px 40px rgba(0, 0, 0, .45);
}