/* ─────────────────────────────────────────────────────────────
   Konzeptsan Group Design System — Core tokens (brand-neutral)
   Source: Simplisan Figma (Homepage). Shared by all group brands.
   ───────────────────────────────────────────────────────────── */

/* Host Grotesk — primary brand & UI typeface
   Loaded from local /fonts. Has Google Fonts equivalent if needed. */
@font-face { font-family: "Host Grotesk"; src: url("/static/fonts/HostGrotesk-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("/static/fonts/HostGrotesk-Regular.ttf") format("truetype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("/static/fonts/HostGrotesk-Medium.ttf") format("truetype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("/static/fonts/HostGrotesk-SemiBold.ttf") format("truetype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("/static/fonts/HostGrotesk-Bold.ttf") format("truetype");         font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ─── BRAND COLOR ─────────────────────────────────────────────
     NOT defined here. Load exactly one brands/<brand>/brand.css
     AFTER this file. It supplies:
       --brand  --brand-light  --brand-deep  --brand-ui
       --fg-on-brand  --ring-focus
     Without it, every brand-dependent rule falls back to --ink.  */
  --brand:        var(--ink);
  --brand-light:  var(--ink-muted);
  --brand-deep:   var(--ink);
  --brand-ui:     var(--ink);

  /* ─── NEUTRALS ────────────────────────────────────────────── */
  --bg:                   rgb(244, 248, 255);  /* page background — cool white */
  --bg-elev:              rgb(255, 255, 255);  /* card / surface */
  --bg-soft:              rgb(238, 242, 249);  /* nested surface */
  --line:                 rgb(217, 217, 217);  /* hairlines, dividers */
  --line-strong:          rgb(194, 194, 194);

  --ink:                  rgb(41, 41, 41);     /* #292929 — darkest allowed (graphite) */
  --ink-2:                rgb(41, 41, 41);     /* alias of --ink — kept for back-compat */
  --ink-3:                rgb(55, 54, 54);     /* alt body — slightly warmer than ink */
  --ink-muted:            rgb(89, 89, 89);     /* secondary copy */
  --ink-on-dark:          rgb(255, 255, 255);

  /* ─── SEMANTIC ─────────────────────────────────────────────── */
  --fg-default:           var(--ink);
  --fg-muted:             var(--ink-muted);
  --fg-subtle:            var(--ink-3);
  --fg-on-brand:          var(--ink);          /* overridden per brand */
  --fg-on-dark:           var(--ink-on-dark);
  --bg-default:           var(--bg);
  --bg-card:              var(--bg-elev);
  --accent:               var(--brand);

  /* ─── ELEVATION ────────────────────────────────────────────── */
  --shadow-1:             0 1px 3px rgba(0, 0, 0, 0.07);     /* sticky nav */
  --shadow-2:             0 0 4px rgba(0, 0, 0, 0.25);       /* card */
  --shadow-3:             0 8px 24px rgba(0, 0, 0, 0.10);    /* hover */
  --ring-focus:           0 0 0 3px rgba(41, 41, 41, 0.35);  /* overridden per brand */

  /* ─── RADIUS ──────────────────────────────────────────────── */
  --radius-xs:            4px;
  --radius-sm:            8px;   /* default button radius */
  --radius-md:            12px;
  --radius-lg:            16px;  /* card radius */
  --radius-xl:            24px;
  --radius-pill:          999px;

  /* ─── SPACING ─────────────────────────────────────────────── */
  --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: 136px;

  /* ─── TYPE ────────────────────────────────────────────────── */
  --font-sans:            "Host Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;

  /* Sizes seen in source — keep ladder restrained */
  --fs-10: 10px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-34: 34px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* Line heights */
  --lh-tight: 1;            /* h2/h3 in source use 100% */
  --lh-snug:  1.2;          /* h1 hero */
  --lh-base:  1.4983;       /* the recurring "150%" body lh */
}

/* ─── SEMANTIC TYPE TOKENS ───────────────────────────────────── */
:root {
  --t-display:   700 var(--fs-48) / var(--lh-snug)  var(--font-sans);  /* hero */
  --t-h1:        700 var(--fs-48) / var(--lh-snug)  var(--font-sans);
  --t-h2:        700 var(--fs-34) / var(--lh-base)  var(--font-sans);  /* "Trusted by:" */
  --t-h3:        700 var(--fs-36) / var(--lh-base)  var(--font-sans);  /* expandable item */
  --t-title:     700 var(--fs-24) / var(--lh-tight) var(--font-sans);  /* card titles — always 700 */
  --t-eyebrow:   300 var(--fs-24) / var(--lh-tight) var(--font-sans);  /* "Servicetools" */
  --t-body:      300 var(--fs-20) / var(--lh-base)  var(--font-sans);
  --t-body-sm:   300 var(--fs-16) / var(--lh-base)  var(--font-sans);
  --t-meta:      300 var(--fs-14) / var(--lh-base)  var(--font-sans);
  --t-button:    700 var(--fs-16) / var(--lh-tight) var(--font-sans);
  --t-nav:       300 var(--fs-16) / var(--lh-tight) var(--font-sans);
}

/* ─── ELEMENT DEFAULTS (opt-in via .ds-prose) ────────────────── */
.ds-prose, .ds-prose * { font-family: var(--font-sans); }
.ds-prose { color: var(--ink); background: var(--bg); }

.ds-prose h1 { font: var(--t-h1);     color: var(--ink);    margin: 0 0 var(--space-5); }
.ds-prose h2 { font: var(--t-h2);     color: var(--ink);    margin: 0 0 var(--space-4); }
.ds-prose h3 { font: var(--t-title);  color: var(--ink);    margin: 0 0 var(--space-3); }
.ds-prose p, .ds-prose li { font: var(--t-body-sm); color: var(--ink-muted); margin: 0 0 var(--space-3); }
.ds-prose .eyebrow { font: var(--t-eyebrow); color: var(--ink-2); display: block; margin-bottom: var(--space-2); }
.ds-prose .lead    { font: var(--t-body); color: var(--ink-2); }

/* Buttons */
.ds-btn {
  font: var(--t-button); color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 8px;
  padding: 11px 22px; cursor: pointer; white-space: nowrap; min-width: 146px;
  transition: background .15s ease, color .15s ease, transform .08s ease, border-color .15s ease;
}
.ds-btn:hover  { background: var(--ink); color: var(--ink-on-dark); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--fg-on-brand); font-weight: 300; }
.ds-btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #FFFFFF; }
.ds-btn--ghost   { background: var(--bg-elev); }
.ds-btn:disabled, .ds-btn[disabled] { font-weight: 300; opacity: .4; cursor: not-allowed; }
.ds-btn:disabled:hover, .ds-btn[disabled]:hover { background: transparent; color: var(--ink); }
.ds-btn--primary:disabled, .ds-btn--primary[disabled]:hover { background: var(--brand); border-color: var(--brand); color: var(--fg-on-brand); }

/* Play / arrow circle button — recurring */
.ds-iconbtn {
  width: 41px; height: 41px; border-radius: 999px; border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center; background: transparent;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ds-iconbtn:hover { background: var(--ink); color: var(--ink-on-dark); }

/* Card */
.ds-card {
  background: linear-gradient(rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}