/* ============================================================
   London Tower — Web fonts
   NOTE (font substitution): the original londontower.eu is a
   default WordPress theme with no distinctive brand type. This
   is a fresh system, so the pairing below is a deliberate choice:
     • Cormorant Garamond — editorial luxury display serif
     • Archivo            — architectural grotesque for UI/body
     • IBM Plex Mono      — spec figures / technical detail
   Delivered via Google Fonts. Swap for licensed/self-hosted
   files if the brand adopts bespoke typefaces.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* ============================================================
   London Tower — Color tokens
   Palette rationale:
   - "Stone"    : cool near-black greys → the black natural-stone façade
   - "Limestone": warm off-whites       → paper / light surfaces
   - "Sage"     : London blue           → PRIMARY accent, from the logo (#2890C0)
   - "Harbor"   : warm brass / amber     → complementary secondary accent
   ============================================================ */
:root {
  /* --- Stone (cool neutral, from black natural stone) --- */
  --stone-950: #0B0E11;
  --stone-900: #14181C;
  --stone-800: #1E242A;
  --stone-700: #2C343B;
  --stone-600: #434E56;
  --stone-500: #63707A;
  --stone-400: #8C979F;
  --stone-300: #B4BCC1;
  --stone-200: #D5DADD;
  --stone-100: #E8EBED;

  /* --- Limestone (warm paper neutrals) --- */
  --limestone-50:  #FBFAF7;
  --limestone-100: #F5F2EC;
  --limestone-200: #ECE7DD;
  --limestone-300: #DED7C8;

  /* --- Harbor (warm brass / amber — complement of the London blue) --- */
  --harbor-900: #4A3413;
  --harbor-700: #8A5E22;
  --harbor-500: #B5852F;
  --harbor-300: #D8B471;
  --harbor-100: #F1E6CE;

  /* --- Sage (London blue — PRIMARY accent, sampled from the logo) --- */
  --sage-700: #12557A;
  --sage-600: #1B76A1;
  --sage-500: #2890C0;
  --sage-400: #5EB0D6;
  --sage-200: #C4E2F1;

  /* --- Pure --- */
  --white: #FFFFFF;
  --black: #000000;

  /* --- Semantic status --- */
  --success: #3E7A5E;
  --warning: #B8975A;  /* @kind color */
  --danger:  #A5443A;

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */
  /* Backgrounds & surfaces (light / paper is the default theme) */
  --bg-page:        var(--limestone-50);
  --bg-inset:       var(--limestone-100);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-ink:    var(--stone-900);

  /* Text */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-inverse:   var(--limestone-50);
  --text-on-accent: var(--limestone-50);

  /* Accents */
  --accent:         var(--sage-500);
  --accent-strong:  var(--sage-600);
  --accent-water:   var(--harbor-500);
  --accent-water-strong: var(--harbor-700);

  /* Lines & borders */
  --border-subtle:  #E4E0D6;
  --border-default: #D6D1C4;
  --border-strong:  var(--stone-300);
  --border-ink:     var(--stone-900);

  /* Interaction */
  --focus-ring:     var(--sage-500);
  --overlay-scrim:  rgba(11, 14, 17, 0.58);
}

/* ============================================================
   Ink theme — dark surfaces (stone façade). Apply on a wrapper:
   <div class="lt-ink"> … </div>  or  data-theme="ink"
   ============================================================ */
.lt-ink,
[data-theme="ink"] {
  --bg-page:        var(--stone-950);
  --bg-inset:       var(--stone-900);
  --surface-card:   var(--stone-800);
  --surface-raised: var(--stone-700);
  --surface-ink:    var(--black);

  --text-primary:   var(--limestone-50);
  --text-secondary: var(--stone-300);
  --text-muted:     var(--stone-400);
  --text-inverse:   var(--stone-900);

  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.14);
  --border-strong:  rgba(255,255,255,0.24);
  --border-ink:     var(--limestone-50);

  --focus-ring:     var(--sage-400);
}
/* ============================================================
   London Tower — Typography tokens
   Display : Cormorant Garamond — high-contrast serif, editorial luxury
   Sans    : Archivo — architectural grotesque for UI, body, labels
   Loaded via tokens/fonts.css (Google Fonts).
   ============================================================ */
:root {
  /* Families */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */

  /* Fluid display sizes (clamp: min → viewport → max) */
  --text-display-xl: clamp(3.5rem, 8vw, 7.25rem);   /* hero landmark */
  --text-display-lg: clamp(2.75rem, 6vw, 5.25rem);
  --text-display-md: clamp(2.25rem, 4.5vw, 3.75rem);

  /* Fixed step scale */
  --text-6xl: 5.25rem;  /* 84 */
  --text-5xl: 3.75rem;  /* 60 */
  --text-4xl: 2.75rem;  /* 44 */
  --text-3xl: 2rem;     /* 32 */
  --text-2xl: 1.5rem;   /* 24 */
  --text-xl:  1.25rem;  /* 20 */
  --text-lg:  1.125rem; /* 18 */
  --text-base:1rem;     /* 16 */
  --text-sm:  0.875rem; /* 14 */
  --text-xs:  0.75rem;  /* 12 */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-eyebrow: 0.2em;   /* uppercase labels / wordmark */
}
/* ============================================================
   London Tower — Spacing, layout & radius tokens
   Base unit: 4px. The brand leans crisp & architectural, so
   radii stay tight; generous whitespace does the heavy lifting.
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --section-y: clamp(4rem, 9vw, 8rem); /* @kind spacing */

  /* Radius — kept small; architectural, not soft */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hair: 1px;
  --border-thick: 2px;
}
/* ============================================================
   London Tower — Effects: shadows, motion, misc
   Shadows are cool-tinted (stone), soft and low — refined, never
   heavy. Motion is calm and precise, like a slow reveal.
   ============================================================ */
:root {
  /* Elevation — cool stone-tinted, subtle */
  --shadow-xs: 0 1px 2px rgba(20, 24, 28, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 24, 28, 0.07);
  --shadow-md: 0 8px 24px rgba(20, 24, 28, 0.08);
  --shadow-lg: 0 20px 48px rgba(20, 24, 28, 0.12);
  --shadow-xl: 0 32px 72px rgba(20, 24, 28, 0.16);

  /* Inset hairline for ink surfaces */
  --shadow-ink-line: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* Focus */
  --ring-width: 2px; /* @kind spacing */
  --ring-offset: 2px; /* @kind spacing */

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */
  --dur-reveal: 900ms; /* @kind other */
}

/* ============================================================
   Compatibility aliases — for markup ported from the Doktoren
   architecture (which referenced these token names).
   ============================================================ */
:root {
  --container: var(--container-max);
  --signal-red: var(--danger);
  --header-h: 92px;            /* overwritten at runtime by site.js */
  --measure: 68ch;
}