/* HGF Design tokens (colors + typography). Source: Christian/hgf-design/ */

/* HGF Design — color tokens as CSS custom properties.
   Web-canonical values (verified against hyresgastforeningen.se + Skyltmanual 2023).
   Import this before typography.css. Mirror of tokens.json > color/semantic. */

:root {
  /* --- Primitive: red (Skyltmanual, authoritative) --- */
  --hgf-red-1: #FF0037;   /* HGF Röd 1 — brand main / CTA */
  --hgf-red-2: #FF4D56;   /* HGF Röd 2 — hover / lighter */
  --hgf-red-3: #F97D7D;   /* HGF Röd 3 — soft / decorative */
  --hgf-red-surface: #FCF2F3;

  /* --- Primitive: blue (icon SVGs + live site) --- */
  --hgf-blue-ink: #06007E;      /* deep structural blue */
  --hgf-blue-bright: #231FD8;   /* links / accents */
  --hgf-blue-surface: #EBF3FF;
  --hgf-blue-surface-2: #D8E8FF;

  /* --- Primitive: yellow --- */
  --hgf-yellow: #FFE988;
  --hgf-yellow-strong: #FFDB38;

  /* --- Primitive: neutrals --- */
  --hgf-ink: #1A1A1A;
  --hgf-black: #231F20;
  --hgf-grey-70: #757575;
  --hgf-grey-50: #AEAEAE;
  --hgf-grey-40: #B3B3B3;
  --hgf-grey-15: #F0F0F0;
  --hgf-warm-05: #F9F7F6;
  --hgf-white: #FFFFFF;

  /* --- Primitive: status --- */
  --hgf-success: #71B942;
  --hgf-warning: #DC3801;

  /* --- Semantic roles (theme consumes these) --- */
  --color-bg: var(--hgf-white);
  --color-surface: var(--hgf-warm-05);
  --color-surface-blue: var(--hgf-blue-surface);
  --color-surface-red: var(--hgf-red-surface);

  --color-ink: var(--hgf-ink);
  --color-ink-muted: var(--hgf-grey-70);

  --color-primary: var(--hgf-blue-ink);        /* header, footer, hero fields, headings on light */
  --color-primary-bright: var(--hgf-blue-bright);
  --color-on-primary: var(--hgf-white);

  --color-cta: var(--hgf-red-1);               /* primary call-to-action */
  --color-cta-hover: var(--hgf-red-2);
  --color-on-cta: var(--hgf-white);

  --color-link: var(--hgf-blue-bright);
  --color-link-hover: var(--hgf-blue-ink);

  --color-highlight: var(--hgf-yellow);
  --color-focus-ring: var(--hgf-yellow);
  --color-border: var(--hgf-grey-15);
}

/* HGF Design — typography tokens + base type rules.
   Requires fonts/fonts.css (@font-face) to be loaded for HyraSans to render.
   Mirror of tokens.json > font / space / radius / shadow / layout. */

:root {
  /* --- Font families --- */
  --font-display: "HyraSansDisplay", "HyraSans", system-ui, sans-serif; /* hero, H1 */
  --font-heading: "HyraSans", system-ui, sans-serif;                    /* H2–H6, UI, buttons */
  --font-body:    "HyraSansText", Georgia, system-ui, serif;            /* running text */

  --fw-regular: 400;
  --fw-bold: 700;

  /* --- Type scale (base body 1.125rem = 18px, ~1.25 modular) --- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --ls-display: -0.01em;
  --ls-normal: 0;
  --ls-caps: 0.04em;

  /* --- Spacing (4px base) --- */
  --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;

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(26,26,26,0.06);
  --shadow-md: 0 4px 16px rgba(26,26,26,0.08);
  --shadow-lg: 0 12px 32px rgba(6,0,126,0.12);

  /* --- Layout --- */
  --container: 1160px;
  --container-narrow: 760px;
  --gutter: 1.5rem;
}

/* --- Optional base element rules. Include in a theme if you want HGF defaults.
   GeneratePress users may prefer to map these via the Customizer instead. --- */
.hgf-typography {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-ink);
}
.hgf-typography h1,
.hgf-typography h2,
.hgf-typography h3,
.hgf-typography h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}
.hgf-typography h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.hgf-typography h2 { font-size: var(--fs-2xl); }
.hgf-typography h3 { font-size: var(--fs-xl); }
.hgf-typography h4 { font-size: var(--fs-lg); }
.hgf-typography p { margin: 0 0 var(--space-5); }
.hgf-typography a { color: var(--color-link); text-underline-offset: 0.15em; }
.hgf-typography a:hover { color: var(--color-link-hover); }

@media (max-width: 640px) {
  :root { --fs-4xl: 2.5rem; --fs-3xl: 2rem; --fs-2xl: 1.75rem; }
}