/* ============================================================================
   GBS Widmer — Colors & Type foundations
   Glasbau · Schiebetürsysteme · Zürich
   ----------------------------------------------------------------------------
   Brand DNA: glass. Transparency, light, cool azure gradients, Swiss restraint.
   Palette derived directly from the logo "sail" gradient (#a0e0f0 → #0060b0)
   plus a near-black ink wordmark and cool neutral greys.

   FONT: Manrope (client-specified, self-hosted from fonts/) — a clean
   geometric-humanist grotesque. A single family carries the whole hierarchy:
   weight + tracking do the work (200–800 available). Modern, precise,
   architectural — suits glass.
   ============================================================================ */

@font-face { font-family: "Manrope"; src: url("fonts/Manrope-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand · Azure (the glass sail) ---------- */
  --azure-50:  #f1fafe;
  --azure-100: #e3f4fc;
  --azure-200: #c2e7f6;
  --azure-300: #93d3ee;   /* light glass highlight */
  --azure-400: #46b4e4;
  --azure-500: #0099d6;   /* PRIMARY — vivid glass azure */
  --azure-600: #007cb6;
  --azure-700: #0060a0;   /* deep sail blue */
  --azure-800: #074f80;
  --azure-900: #0d3f63;

  /* ---------- Ink & cool neutrals ---------- */
  --ink:       #14181c;   /* wordmark black */
  --slate-900: #1b2025;
  --slate-800: #2b323a;
  --slate-700: #3e474f;
  --slate-600: #586470;
  --slate-500: #76828d;   /* tagline grey */
  --slate-400: #9aa5af;
  --slate-300: #c3cbd2;
  --slate-200: #e0e5e9;
  --slate-100: #eef1f4;
  --slate-50:  #f7f9fa;
  --white:     #ffffff;

  /* ---------- Semantic ---------- */
  --success:   #1f9d6b;
  --success-bg:#e7f6ee;
  --warning:   #c98a16;
  --warning-bg:#fbf1da;
  --danger:    #cf4439;
  --danger-bg: #fbe9e7;
  --info:      var(--azure-500);
  --info-bg:   var(--azure-100);

  /* ---------- Semantic surface / text roles ---------- */
  --bg:         var(--white);
  --bg-subtle:  var(--slate-50);
  --bg-muted:   var(--slate-100);
  --surface:    var(--white);
  --surface-tint: var(--azure-50);

  --fg1: var(--ink);          /* primary text */
  --fg2: var(--slate-600);    /* secondary text */
  --fg3: var(--slate-500);    /* muted / captions */
  --fg-on-azure: var(--white);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --ring:          color-mix(in oklch, var(--azure-500) 45%, transparent);

  --link:       var(--azure-600);
  --link-hover: var(--azure-700);

  /* signature glass gradient (the sail) */
  --grad-sail: linear-gradient(150deg, #a8e2f5 0%, #2aa7e0 38%, #0078b8 72%, #0a4f80 100%);
  --grad-azure: linear-gradient(180deg, var(--azure-500), var(--azure-700));
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,.85), rgba(195,231,246,.35));

  /* ---------- Type families ---------- */
  /* One family, Manrope, across the board. --font-serif kept as an alias so
     existing rules that reference it resolve to Manrope (display = heavy weight). */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: var(--font-display);
  --font-sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* display weight for big headings */
  --weight-display: 800;

  /* ---------- Type scale (1.250 major-third) ---------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.875rem;  /* 46 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.75rem;   /* 76 */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal:1.55;
  --leading-relaxed:1.7;

  /* tracking */
  --tracking-tag:  0.22em;   /* the letterspaced tagline / eyebrows */
  --tracking-wide: 0.06em;
  --tracking-tight:-0.01em;

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

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

  /* ---------- Elevation (cool, low-spread — glass casts soft shadows) ---------- */
  --shadow-xs: 0 1px 2px rgba(20,40,60,.06);
  --shadow-sm: 0 2px 6px rgba(20,40,60,.08);
  --shadow-md: 0 8px 22px rgba(15,45,75,.10);
  --shadow-lg: 0 18px 48px rgba(12,45,80,.14);
  --shadow-azure: 0 12px 30px rgba(0,124,182,.28);

  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — opt-in via .gbs-type scope
   ============================================================================ */
.gbs-type { color: var(--fg1); font-family: var(--font-sans); font-size: var(--text-base);
  line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }

.gbs-type h1, .h1 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl);
  line-height: var(--leading-tight); letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.gbs-type h2, .h2 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl);
  line-height: var(--leading-tight); letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.gbs-type h3, .h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  line-height: var(--leading-snug); letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
.gbs-type h4, .h4 {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lg);
  line-height: var(--leading-snug); color: var(--ink); margin: 0;
}
.gbs-type p, .body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg2); margin: 0; max-width: 68ch; }
.lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg2); }

/* The signature eyebrow / tagline: uppercase, letterspaced, azure or grey */
.eyebrow, .tagline {
  font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--azure-600);
}
.tagline-muted { color: var(--slate-500); }

.caption { font-size: var(--text-sm); color: var(--fg3); }
.overline { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--fg3); }

a.gbs-link, .gbs-link { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
a.gbs-link:hover, .gbs-link:hover { color: var(--link-hover); }

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