/* ==========================================================================
   Re-Thought Design System — Colors & Type
   --------------------------------------------------------------------------
   Source: uploads/Re-Thought Design Guide.pdf
   Brand: Re-Thought Consulting (https://www.re-thought.de/)
   ========================================================================== */

/* Playfair Display — official brand files (variable woff2 + static woff fallbacks) */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2-variations"),
       url("fonts/PlayfairDisplay-400.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-VariableFont_wght-italic.woff2") format("woff2-variations"),
       url("fonts/PlayfairDisplay-400-italic.woff") format("woff");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Montserrat — official brand files (variable + static fallbacks) */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =========================================================================
     COLOR PALETTE
     -------------------------------------------------------------------------
     Four families, each in a 6-step ramp from light → dark.
     The brand identity sits in the DARK end of the Main + Secondary ramps;
     Highlight families are accent-only.
     ========================================================================= */

  /* Main — desaturated teal / dark green. The brand's signature color. */
  --rt-main-100: #879698;   /* Misty pale teal              */
  --rt-main-200: #4A6567;   /* Mid teal                      */
  --rt-main-300: #33494B;   /* Deep teal                     */
  --rt-main-400: #1C3031;   /* Hero / primary surface  ★    */
  --rt-main-500: #112A2B;   /* Near-black teal               */
  --rt-main-600: #071F20;   /* Deepest teal                  */

  /* Secondary — cool slate blue. Use for chrome, structural surfaces. */
  --rt-secondary-100: #999DA8;
  --rt-secondary-200: #565E72;
  --rt-secondary-300: #3B4253;
  --rt-secondary-400: #212736;
  --rt-secondary-500: #161D30;
  --rt-secondary-600: #0B1223;

  /* Highlight #1 — warm cream / tan. Soft warmth on dark surfaces. */
  --rt-warm-100: #FAF1E0;   /* Cream highlight (paper)       */
  --rt-warm-200: #AA9A7B;
  --rt-warm-300: #7B6E54;
  --rt-warm-400: #51462E;
  --rt-warm-500: #47391C;
  --rt-warm-600: #35270C;

  /* Highlight #2 — warm rose / blush. Sparingly: emphasis, callouts. */
  --rt-blush-100: #FAE1E0;
  --rt-blush-200: #AA7C7B;
  --rt-blush-300: #7B5554;
  --rt-blush-400: #512F2E;
  --rt-blush-500: #471D1C;
  --rt-blush-600: #350D0C;

  /* True neutrals (derived, not in PDF — used for body / paper). */
  --rt-paper:  #FBF8F2;     /* off-white, very slight warm tint */
  --rt-ink:    #0E1E1F;     /* near-black, teal-leaning         */
  --rt-line:   #DCD6C8;     /* warm hairline                    */
  --rt-line-dark: #2A3F40;  /* hairline on dark                 */

  /* =========================================================================
     SEMANTIC COLOR ROLES
     ========================================================================= */
  --rt-bg:           var(--rt-paper);
  --rt-bg-elevated: #FFFFFF;
  --rt-bg-inverse:   var(--rt-main-400);   /* hero / dark sections */

  --rt-fg:           var(--rt-ink);
  --rt-fg-muted:     #4A5556;
  --rt-fg-subtle:    #7B8587;
  --rt-fg-on-dark:   var(--rt-warm-100);   /* cream on teal */
  --rt-fg-on-dark-muted: #B7B0A2;

  --rt-accent:       var(--rt-main-400);   /* primary CTA */
  --rt-accent-hover: var(--rt-main-300);
  --rt-accent-press: var(--rt-main-500);
  --rt-accent-fg:    var(--rt-warm-100);

  --rt-highlight:    var(--rt-warm-100);   /* cream — used as inverse fg + soft surface */
  --rt-blush:        var(--rt-blush-100);  /* sparing accent */

  --rt-border:       var(--rt-line);
  --rt-border-dark:  var(--rt-line-dark);

  --rt-success:      #4A6F4A;
  --rt-warning:      #AA7C2C;
  --rt-danger:       var(--rt-blush-300);

  /* =========================================================================
     TYPOGRAPHY — FONT FAMILIES
     -------------------------------------------------------------------------
     Display: Playfair Display (high-contrast didone serif)
     Body:    Montserrat (geometric sans)
     ========================================================================= */
  --rt-font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --rt-font-body:    "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rt-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Type SCALE — fluid-ish, but mostly fixed for design fidelity */
  --rt-fs-display:  clamp(56px, 7vw, 96px);   /* hero */
  --rt-fs-h1:       clamp(40px, 5vw, 64px);
  --rt-fs-h2:       clamp(32px, 3.6vw, 44px);
  --rt-fs-h3:       28px;
  --rt-fs-h4:       22px;
  --rt-fs-eyebrow:  13px;                     /* tracked, uppercase */
  --rt-fs-lede:     20px;                     /* intro paragraph */
  --rt-fs-body:     17px;
  --rt-fs-small:    14px;
  --rt-fs-micro:    12px;
  --rt-fs-quote:    clamp(22px, 2.4vw, 30px); /* pull-quote */

  /* Line heights */
  --rt-lh-tight:   1.08;
  --rt-lh-snug:    1.22;
  --rt-lh-base:    1.6;
  --rt-lh-relaxed: 1.75;

  /* Letter-spacing */
  --rt-tracking-tight:  -0.015em;
  --rt-tracking-normal:  0;
  --rt-tracking-wide:    0.04em;
  --rt-tracking-eyebrow: 0.18em;   /* the brand's tracked-out look */

  /* Font weights — Playfair: 400/600/800; Montserrat: 300/400/500/600/700 */
  --rt-w-light:    300;
  --rt-w-regular:  400;
  --rt-w-medium:   500;
  --rt-w-semibold: 600;
  --rt-w-bold:     700;
  --rt-w-black:    900;

  /* =========================================================================
     SPACING — 4px base, multiples for layout rhythm
     ========================================================================= */
  --rt-s-0:  0;
  --rt-s-1:  4px;
  --rt-s-2:  8px;
  --rt-s-3:  12px;
  --rt-s-4:  16px;
  --rt-s-5:  24px;
  --rt-s-6:  32px;
  --rt-s-7:  48px;
  --rt-s-8:  64px;
  --rt-s-9:  96px;
  --rt-s-10: 128px;

  /* =========================================================================
     RADII — generally MODEST. Brand is editorial, not playful.
     ========================================================================= */
  --rt-radius-none: 0;
  --rt-radius-sm:   2px;
  --rt-radius-md:   4px;
  --rt-radius-lg:   8px;
  --rt-radius-pill: 999px;

  /* =========================================================================
     SHADOWS — soft, warm, restrained
     ========================================================================= */
  --rt-shadow-xs: 0 1px 2px rgba(28, 48, 49, 0.06);
  --rt-shadow-sm: 0 2px 6px rgba(28, 48, 49, 0.08);
  --rt-shadow-md: 0 8px 24px rgba(28, 48, 49, 0.10);
  --rt-shadow-lg: 0 20px 48px rgba(28, 48, 49, 0.14);
  --rt-shadow-inset: inset 0 0 0 1px rgba(28, 48, 49, 0.08);

  /* =========================================================================
     MOTION
     ========================================================================= */
  --rt-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --rt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rt-dur-fast:   140ms;
  --rt-dur-base:   240ms;
  --rt-dur-slow:   460ms;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES — apply by including this file
   ========================================================================== */
html {
  font-family: var(--rt-font-body);
  font-size: var(--rt-fs-body);
  line-height: var(--rt-lh-base);
  color: var(--rt-fg);
  background: var(--rt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Display + headings — always Playfair, tight tracking */
.rt-display,
h1, h2, h3, h4 {
  font-family: var(--rt-font-display);
  letter-spacing: var(--rt-tracking-tight);
  line-height: var(--rt-lh-tight);
  text-wrap: balance;
  margin: 0 0 var(--rt-s-4);
  color: inherit;
}

.rt-display { font-size: var(--rt-fs-display); font-weight: var(--rt-w-bold); }
h1, .rt-h1 { font-size: var(--rt-fs-h1); font-weight: var(--rt-w-bold); }
h2, .rt-h2 { font-size: var(--rt-fs-h2); font-weight: var(--rt-w-semibold); line-height: var(--rt-lh-snug); }
h3, .rt-h3 { font-size: var(--rt-fs-h3); font-weight: var(--rt-w-semibold); line-height: var(--rt-lh-snug); }
h4, .rt-h4 { font-size: var(--rt-fs-h4); font-weight: var(--rt-w-semibold); line-height: var(--rt-lh-snug); }

.rt-italic-display {
  font-family: var(--rt-font-display);
  font-style: italic;
  font-weight: var(--rt-w-regular);
}

/* Body */
p, .rt-p {
  font-family: var(--rt-font-body);
  font-size: var(--rt-fs-body);
  line-height: var(--rt-lh-relaxed);
  font-weight: var(--rt-w-regular);
  color: var(--rt-fg);
  text-wrap: pretty;
  margin: 0 0 var(--rt-s-4);
}

.rt-lede {
  font-family: var(--rt-font-body);
  font-size: var(--rt-fs-lede);
  line-height: var(--rt-lh-relaxed);
  font-weight: var(--rt-w-regular);
  color: var(--rt-fg-muted);
}

.rt-eyebrow {
  font-family: var(--rt-font-body);
  font-size: var(--rt-fs-eyebrow);
  font-weight: var(--rt-w-semibold);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rt-fg-muted);
}

.rt-quote {
  font-family: var(--rt-font-display);
  font-style: italic;
  font-weight: var(--rt-w-regular);
  font-size: var(--rt-fs-quote);
  line-height: var(--rt-lh-snug);
  color: var(--rt-fg);
}
.rt-quote::before { content: "»"; margin-right: 0.15em; }
.rt-quote::after  { content: "«"; margin-left: 0.15em; }

.rt-small { font-size: var(--rt-fs-small); }
.rt-micro { font-size: var(--rt-fs-micro); letter-spacing: 0.02em; }

code, kbd, pre, .rt-mono {
  font-family: var(--rt-font-mono);
  font-size: 0.94em;
}

a, .rt-link {
  color: var(--rt-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--rt-dur-fast) var(--rt-ease-out);
}
a:hover { color: var(--rt-accent-press); }