/* Holland Park Interiør — designsystemets tokens + selvhostede webfonter (latin).
   Generert av build-static.mjs fra tokens/*.css. Rediger kildene, ikke denne filen. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/jost-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jost-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jost-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jost-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');}

/* Holland Park Interiør — Color tokens
   Warm, earthy, muted neutrals. Champagne gold from the wordmark;
   near-black ink from the logo card; espresso, taupe, sand & cream
   drawn from the project photography. */

:root {
  /* ---- Base palette : warm neutrals (light → dark) ---- */
  --hp-paper:      #F5F0E8; /* primary page background, warm off-white */
  --hp-cream:      #EDE6DA; /* secondary surface / alternating sections */
  --hp-linen:      #E5DCCC; /* muted card / inset panel */
  --hp-sand:       #D8CBB4; /* filled chip / soft divider band */
  --hp-champagne:  #C9B79C; /* gold accent — text/detail on dark */
  --hp-brass:      #A98F5F; /* richer metallic — hairlines, accents on light (decor/large text only) */
  --hp-brass-text: #7C6439; /* deep brass for SMALL text on light: 4.9:1 on paper, 4.5:1 on cream (WCAG AA) */
  --hp-taupe:      #8A7259; /* mid warm brown — secondary accent */
  --hp-clay:       #6E5B45; /* deep brown */
  --hp-espresso:   #3E3A34; /* dark warm brown */
  --hp-charcoal:   #2A2926; /* dark surface (deep walls in projects) */
  --hp-ink:        #1C1C1A; /* near-black, from the logo card */

  /* ---- Supporting accent (used sparingly) ---- */
  --hp-sage:       #8B9088; /* muted green-grey seen in interiors */
  --hp-sage-deep:  #5F6A62;

  /* ---- Text ---- */
  --hp-text:            #2A2723; /* body & headings on light */
  --hp-text-muted:      #6C6458; /* secondary copy */
  --hp-text-soft:       #6E665A; /* captions, meta — darkened from #948B7D (2.96:1) to pass WCAG AA on paper and cream */
  --hp-text-on-dark:    #EDE6DA; /* body on dark surfaces */
  --hp-text-on-dark-muted: #B4AA98;

  /* ---- Semantic surfaces ---- */
  --hp-surface-page:    var(--hp-paper);
  --hp-surface-alt:     var(--hp-cream);
  --hp-surface-card:    #FBF8F2;
  --hp-surface-inset:   var(--hp-linen);
  --hp-surface-dark:    var(--hp-ink);
  --hp-surface-dark-2:  var(--hp-charcoal);

  /* ---- Lines & borders ---- */
  --hp-border:        rgba(42, 39, 35, 0.14);
  --hp-border-strong: rgba(42, 39, 35, 0.28);
  --hp-border-brass:  rgba(169, 143, 95, 0.55);
  --hp-border-on-dark: rgba(237, 230, 218, 0.18);

  /* ---- Interactive (accent = brass/taupe) ---- */
  /* Links/ghost buttons are small text: taupe (#8A7259) is only 4.0:1 on paper
     and 3.7:1 on cream, so text accent uses clay (5.7:1 / 5.2:1). */
  --hp-accent:        var(--hp-clay);
  --hp-accent-hover:  var(--hp-espresso);
  --hp-accent-on-dark: var(--hp-champagne);

  /* ---- Focus ring ---- */
  --hp-focus: rgba(169, 143, 95, 0.55); /* soft halo only; the ring itself uses --hp-focus-ring */
  --hp-focus-ring: var(--hp-brass-text); /* ≥3:1 on light surfaces */
}

/* Holland Park Interiør — Typography tokens
   Display: Cormorant Garamond (elegant high-contrast serif)
   Text/UI: Jost (quiet geometric sans) */

:root {
  /* ---- Families ---- */
  --hp-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --hp-font-serif:   'Cormorant Garamond', Georgia, serif;
  --hp-font-sans:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Weights ---- */
  --hp-w-light:   300; /* @kind other */
  --hp-w-regular: 400; /* @kind other */
  --hp-w-medium:  500; /* @kind other */
  --hp-w-semi:    600; /* @kind other */
  --hp-w-bold:    700; /* @kind other */

  /* ---- Type scale (fluid where useful) ---- */
  --hp-text-xs:   0.75rem;   /* 12px — meta, fine print */
  --hp-text-sm:   0.8125rem; /* 13px — labels, captions */
  --hp-text-eyebrow: 0.75rem;/* 12px — tracked uppercase eyebrows */
  --hp-text-base: 1.0625rem; /* 17px — body */
  --hp-text-md:   1.1875rem; /* 19px */
  --hp-text-lead: 1.375rem;  /* 22px — lead paragraph */
  --hp-text-h6:   1.25rem;
  --hp-text-h5:   1.5rem;
  --hp-text-h4:   1.9375rem;
  --hp-text-h3:   clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); /* @kind spacing */
  --hp-text-h2:   clamp(2.4rem, 1.6rem + 2.6vw, 3.75rem); /* @kind spacing */
  --hp-text-h1:   clamp(3rem, 1.8rem + 4vw, 5.25rem); /* @kind spacing */
  --hp-text-display: clamp(3.6rem, 2rem + 6vw, 7rem); /* @kind spacing */

  /* ---- Line heights ---- */
  --hp-leading-tight:  1.08;
  --hp-leading-snug:   1.22;
  --hp-leading-normal: 1.5;
  --hp-leading-relaxed:1.72;

  /* ---- Letter spacing ---- */
  --hp-tracking-eyebrow: 0.24em; /* uppercase eyebrows / logo lockup */
  --hp-tracking-wide:    0.12em;
  --hp-tracking-label:   0.06em;
  --hp-tracking-serif:   0.005em;
  --hp-tracking-tight:  -0.01em;
}

/* Holland Park Interiør — Spacing & layout tokens
   4px base rhythm; generous section spacing for an airy, editorial feel. */

:root {
  --hp-space-0:  0;
  --hp-space-1:  4px;
  --hp-space-2:  8px;
  --hp-space-3:  12px;
  --hp-space-4:  16px;
  --hp-space-5:  20px;
  --hp-space-6:  24px;
  --hp-space-8:  32px;
  --hp-space-10: 40px;
  --hp-space-12: 48px;
  --hp-space-16: 64px;
  --hp-space-20: 80px;
  --hp-space-24: 96px;
  --hp-space-32: 128px;
  --hp-space-40: 160px;

  /* ---- Semantic ---- */
  --hp-gutter:      24px;             /* base inline padding */
  --hp-gutter-lg:   48px;
  --hp-section-y:   clamp(64px, 8vw, 128px); /* @kind spacing */
  --hp-content-max: 1240px;           /* wide content container */
  --hp-prose-max:   68ch;             /* readable measure */
  --hp-narrow-max:  920px;
}

/* Holland Park Interiør — Effects: radii, shadows, borders, motion
   Classic & rectilinear — restrained rounding, soft warm shadows,
   hairline dividers, unhurried transitions. */

:root {
  /* ---- Corner radii (kept small; the brand reads architectural) ---- */
  --hp-radius-xs:   2px;
  --hp-radius-sm:   3px;
  --hp-radius:      4px;
  --hp-radius-lg:   8px;
  --hp-radius-xl:   14px;
  --hp-radius-pill: 999px;

  /* ---- Shadows (warm-tinted, diffuse, never harsh) ---- */
  --hp-shadow-xs: 0 1px 2px rgba(28, 28, 26, 0.06);
  --hp-shadow-sm: 0 2px 8px rgba(28, 28, 26, 0.07);
  --hp-shadow-md: 0 10px 28px rgba(28, 28, 26, 0.10);
  --hp-shadow-lg: 0 24px 60px rgba(28, 28, 26, 0.14);
  --hp-shadow-image: 0 30px 70px rgba(28, 28, 26, 0.20);

  /* ---- Hairline border presets ---- */
  --hp-hairline:        1px solid var(--hp-border);
  --hp-hairline-strong: 1px solid var(--hp-border-strong);
  --hp-hairline-brass:  1px solid var(--hp-border-brass);

  /* ---- Motion : unhurried, refined ---- */
  --hp-ease:      cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --hp-ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --hp-dur-fast:  160ms; /* @kind other */
  --hp-dur:       280ms; /* @kind other */
  --hp-dur-slow:  520ms; /* @kind other */
}