/* ═══════════════════════════════════════════════════════════════
   FIL: menon-variables.css
   PROBLEM:   ui.css hardkodet Menon-verdiene under egne navn — drift hvis
              Menons tokens.json endres (anti-mønster skillet advarer mot).
   LØSNING:   Speil av Menons kanoniske token-kilde. ui.css aliaser sine
              navn til disse (--accent: var(--menon-forest) osv.). ÉN kilde.
   KILDE:     ~/.claude/skills/menonstyles/css/menon-variables.css (v2).
              Oppdatér herfra hvis tokens.json/skillet endres.
   MERK:      Clarendon Graphic woff2 er nå selvhostet i static/fonts/ (kopiert
              fra menonstyles-skillet), så overskrifter får brand-serifen i
              stedet for Georgia/Times-fallback.
   IMPORTERES AV: templates/base.html (først), docs/stilmanual-demo.html
   STATUS:    complete (mirror)
   ═══════════════════════════════════════════════════════════════ */

/* Clarendon Graphic (Menon brand-serif, overskrifter) — selvhostet woff2.
   Light = 300, Medium = 500; DM Sans (brødtekst) lastes fra Google Fonts. */
@font-face {
  font-family: 'Clarendon Graphic';
  src: url('../fonts/Clarendon-Graphic-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clarendon Graphic';
  src: url('../fonts/Clarendon-Graphic-Light-Italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Clarendon Graphic';
  src: url('../fonts/Clarendon-Graphic-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clarendon Graphic';
  src: url('../fonts/Clarendon-Graphic-Medium-Italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Primary brand --- */
  --menon-gold: #FFC952;
  --menon-gold-rgb: 255, 201, 86;
  --menon-forest: #052929;
  --menon-forest-rgb: 5, 41, 41;

  /* --- Secondary palette --- */
  --menon-darker-teal: #0B3234;
  --menon-teal-green: #215660;
  --menon-ocean-blue: #3D9ADC;
  --menon-light-blue: #C9DFF9;
  --menon-mint-green: #B1F0D0;

  /* --- Surfaces (never pure white, never pure black) --- */
  --menon-page-bg: hsl(180, 8%, 96%);
  --menon-card-bg: hsl(180, 4%, 99%);
  --menon-white: #FFFFFF;
  --menon-off-white: #F3F3F3;

  /* --- Text (dark blue-gray, never #000) --- */
  --menon-text-primary: #0A1F1F;
  --menon-text-secondary: hsl(180, 10%, 38%);
  --menon-text-tertiary: hsl(180, 6%, 56%);
  --menon-dark-grey: #575757;

  /* --- Semantic --- */
  --menon-positive: hsl(160, 50%, 32%);
  --menon-positive-bg: hsl(160, 50%, 95%);
  --menon-negative: hsl(0, 65%, 45%);
  --menon-negative-bg: hsl(0, 60%, 96%);

  /* --- Typography --- */
  --menon-font-heading: 'Clarendon Graphic', 'Clarendon Graphic TT', Clarendon, Georgia, 'Times New Roman', serif;
  --menon-font-body: 'DM Sans', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --menon-font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
  --menon-font-weight-normal: 400;
  --menon-font-weight-book: 430;
  --menon-font-weight-medium: 500;
  --menon-font-weight-semibold: 600;

  /* --- Type scale (Major Third 1.25) with fluid sizing --- */
  --menon-text-display: clamp(2.4rem, 4vw, 3rem);
  --menon-text-h1: clamp(1.8rem, 3vw, 2.4rem);
  --menon-text-h2: clamp(1.4rem, 2vw, 1.8rem);
  --menon-text-h3: 1.25rem;
  --menon-text-body: 1rem;
  --menon-text-small: 0.8125rem;
  --menon-text-caption: 0.6875rem;
  --menon-text-label: 0.6875rem;

  /* --- Spacing (4px base grid) --- */
  --menon-space-1: 4px;
  --menon-space-2: 8px;
  --menon-space-3: 12px;
  --menon-space-4: 16px;
  --menon-space-5: 20px;
  --menon-space-6: 24px;
  --menon-space-8: 32px;
  --menon-space-10: 40px;
  --menon-space-12: 48px;
  --menon-space-16: 64px;
  --menon-space-24: 96px;

  /* --- Borders --- */
  --menon-border: rgba(5, 41, 41, 0.06);
  --menon-border-strong: rgba(5, 41, 41, 0.12);
  --menon-radius: 0;
  --menon-radius-lg: 0;
  --menon-radius-xl: 2px;
  --menon-radius-full: 9999px;

  /* --- Layered shadows (color-matched to teal, not black) --- */
  --menon-shadow-color: 180deg 20% 30%;
  --menon-shadow-xs:
    0 0 1px hsl(var(--menon-shadow-color) / 0.04),
    0 1px 2px hsl(var(--menon-shadow-color) / 0.05);
  --menon-shadow-sm:
    0 0 1px hsl(var(--menon-shadow-color) / 0.04),
    0 1px 2px hsl(var(--menon-shadow-color) / 0.04),
    0 3px 6px hsl(var(--menon-shadow-color) / 0.03),
    0 6px 12px hsl(var(--menon-shadow-color) / 0.02);
  --menon-shadow-md:
    0 0 1px hsl(var(--menon-shadow-color) / 0.05),
    0 1px 2px hsl(var(--menon-shadow-color) / 0.04),
    0 3px 6px hsl(var(--menon-shadow-color) / 0.04),
    0 6px 12px hsl(var(--menon-shadow-color) / 0.03),
    0 12px 24px hsl(var(--menon-shadow-color) / 0.03),
    0 24px 48px hsl(var(--menon-shadow-color) / 0.02);
  --menon-shadow-lg:
    0 0 1px hsl(var(--menon-shadow-color) / 0.04),
    0 1px 2px hsl(var(--menon-shadow-color) / 0.03),
    0 2px 4px hsl(var(--menon-shadow-color) / 0.03),
    0 4px 8px hsl(var(--menon-shadow-color) / 0.03),
    0 8px 16px hsl(var(--menon-shadow-color) / 0.03),
    0 16px 32px hsl(var(--menon-shadow-color) / 0.03),
    0 32px 64px hsl(var(--menon-shadow-color) / 0.02);

  /* --- Transitions --- */
  --menon-transition-fast: 120ms ease;
  --menon-transition: 150ms ease;
  --menon-transition-slow: 250ms ease;

  /* --- Motion (entrance animations) --- */
  --menon-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --menon-duration-enter: 700ms;
  --menon-stagger-delay: 80ms;
}