/* ============================================================
   Renée Hulst — Advies & Ontwikkeling
   Colors & Type foundation
   ============================================================ */

/* --- Display font: Caviar Dreams (brand) ------------------ */
@font-face {
  font-family: 'Caviar Dreams';
  src: url('fonts/CaviarDreams.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams';
  src: url('fonts/CaviarDreams_Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams';
  src: url('fonts/CaviarDreams_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams';
  src: url('fonts/CaviarDreams_BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- Body font: Raleway (local, trimmed to copied weights) - */
@font-face { font-family: 'Raleway'; font-weight: 300; font-style: normal;
  src: url('fonts/Raleway-Light.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Raleway'; font-weight: 400; font-style: normal;
  src: url('fonts/Raleway-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Raleway'; font-weight: 400; font-style: italic;
  src: url('fonts/Raleway-Italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Raleway'; font-weight: 500; font-style: normal;
  src: url('fonts/Raleway-Medium.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Raleway'; font-weight: 600; font-style: normal;
  src: url('fonts/Raleway-SemiBold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Raleway'; font-weight: 700; font-style: normal;
  src: url('fonts/Raleway-Bold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Raleway'; font-weight: 800; font-style: normal;
  src: url('fonts/Raleway-ExtraBold.woff2') format('woff2'); font-display: swap; }

:root {
  /* ---- Brand palette (official) -------------------------- */
  /*   #166177  petrol — primary brand color
   *   #F8722D  orange — accent / CTA
   *   #000000  black
   *   #FFFFFF  white
   *   #EDECEB  warm light grey — default canvas
   */
  --rh-petrol:        #166177;
  --rh-orange:        #F8722D;
  --rh-black:         #000000;
  --rh-white:         #FFFFFF;
  --rh-paper:         #EDECEB;

  /* Tints/shades — derived for UI states, not for new brand color */
  --rh-orange-700:    #C25420;
  --rh-orange-500:    #F8722D;
  --rh-orange-300:    #FBA376;
  --rh-orange-100:    #FDE2D0;

  --rh-petrol-900:    #0B3D4A;
  --rh-petrol-700:    #114F60;
  --rh-petrol-500:    #166177;
  --rh-petrol-300:    #5A8FA0;
  --rh-petrol-100:    #D2E0E5;

  /* ---- Neutrals ----------------------------------------- */
  --rh-ink:           #000000;   /* true black */
  --rh-ink-2:         #2A2A2A;
  --rh-ink-3:         #6B6B6B;
  --rh-paper-2:       #E2E1DF;   /* one step darker for raised bg-2 */
  --rh-line:          #D8D6D2;
  --rh-line-strong:   #BDBAB4;

  /* ---- Semantic foreground/background -------------------- */
  --fg-1:             var(--rh-ink);
  --fg-2:             var(--rh-ink-2);
  --fg-3:             var(--rh-ink-3);
  --fg-on-petrol:     var(--rh-white);
  --fg-on-orange:     var(--rh-white);
  --fg-on-black:      var(--rh-white);

  --bg-1:             var(--rh-paper);
  --bg-2:             var(--rh-paper-2);
  --bg-card:          var(--rh-white);
  --bg-inverse:       var(--rh-petrol);

  --border:           var(--rh-line);
  --border-strong:    var(--rh-line-strong);

  /* ---- Status (kept in-palette) -------------------------- */
  --success:          #2F8F6A;
  --warning:          #C2851A;
  --danger:           #C0432E;
  --info:             var(--rh-petrol);

  /* ---- Type scale ---------------------------------------- */
  --font-display:     'Caviar Dreams', 'Quicksand', 'Avenir Next', system-ui, sans-serif;
  --font-body:        'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-display:       clamp(2.5rem, 4.6vw, 4rem);
  --fs-h1:            2.25rem;
  --fs-h2:            1.75rem;
  --fs-h3:            1.375rem;
  --fs-h4:            1.125rem;
  --fs-body:          1rem;
  --fs-small:         0.875rem;
  --fs-caption:       0.75rem;

  --lh-tight:         1.15;
  --lh-snug:          1.3;
  --lh-body:          1.6;
  --lh-loose:         1.8;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-caps:    0.22em;   /* the brand's signature spaced-caps look */

  /* ---- Spacing (4px base) -------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ---- Radii --------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ---- Elevation ----------------------------------------- */
  --shadow-1:  0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-2:  0 4px 14px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-3:  0 12px 32px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-warm: 0 14px 30px rgba(248,114,45,0.20);

  /* ---- Motion -------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ============================================================
   Semantic typography
   Brand convention: SPACED ALL-CAPS for section labels
   (e.g. "T Y P O G R A P H Y", "C O L O R   P A L E T T E")
   ============================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rh-display, .rh-h1, .rh-h2, .rh-h3, .rh-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.rh-display {
  font-size: var(--fs-display);
  letter-spacing: -0.015em;
}

.rh-h1 { font-size: var(--fs-h1); }
.rh-h2 { font-size: var(--fs-h2); }
.rh-h3 { font-size: var(--fs-h3); font-weight: 400; }
.rh-h4 { font-size: var(--fs-h4); }

.rh-eyebrow,
.rh-label-caps {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-2);
}

/* Signature: letter-spaced caps headline like the brand board
   ("R E N É E   H U L S T") */
.rh-spaced-caps {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-weight: 400;
  color: var(--fg-1);
}

.rh-body  { font-size: var(--fs-body);  line-height: var(--lh-body); }
.rh-small { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--fg-2); }
.rh-quote {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--rh-petrol-700);
  border-left: 3px solid var(--rh-orange);
  padding-left: var(--s-5);
}

a { color: var(--rh-petrol); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--rh-orange); }