/* ============================================================
   Dynamis Treuhand AG — Design Tokens
   Boutique Editorial · Präzision trifft dynamisches Denken
   ============================================================ */

/* --- Web fonts (self-hosted, see styles/fonts.css) -------- */
@import url("./fonts.css");

:root {
  /* ===== Color · Material 3 token system ===== */

  /* Brand accent (terracotta) */
  --accent:                        #9d422b;
  --on-accent:                     #ffffff;

  /* Surfaces (warm cream paper feel) */
  --surface:                       #fef9f2;
  --surface-dim:                   #ded9d3;
  --surface-bright:                #fef9f2;
  --surface-container-lowest:      #ffffff;
  --surface-container-low:         #f8f3ec;
  --surface-container:             #f2ede6;
  --surface-container-high:        #ece7e1;
  --surface-container-highest:     #e7e2db;
  --surface-variant:               #e7e2db;

  /* On-surface ink */
  --on-surface:                    #1d1b17;
  --on-surface-variant:            #424751;
  --inverse-surface:               #32302c;
  --inverse-on-surface:            #f5f0e9;

  /* Lines */
  --outline:                       #737783;
  --outline-variant:               #c2c6d3;

  /* Primary · Logo-Blau */
  --primary:                       #00346f;
  --on-primary:                    #ffffff;
  --primary-container:             #004a99;
  --on-primary-container:          #9bbdff;
  --inverse-primary:               #abc7ff;
  --primary-fixed:                 #d7e2ff;
  --primary-fixed-dim:             #abc7ff;
  --on-primary-fixed:              #001b3f;
  --on-primary-fixed-variant:      #00458f;
  --surface-tint:                  #255dad;

  /* Secondary · Terracotta accent */
  --secondary:                     #9d422b;
  --on-secondary:                  #ffffff;
  --secondary-container:           #fd8c6f;
  --on-secondary-container:        #74240f;
  --secondary-fixed:               #ffdbd2;
  --secondary-fixed-dim:           #ffb4a2;
  --on-secondary-fixed:            #3c0800;
  --on-secondary-fixed-variant:    #7e2b16;

  /* Tertiary · graphite */
  --tertiary:                      #31353a;
  --on-tertiary:                   #ffffff;
  --tertiary-container:            #484c51;
  --on-tertiary-container:         #b9bcc3;
  --tertiary-fixed:                #e0e2e9;
  --tertiary-fixed-dim:            #c3c7cd;
  --on-tertiary-fixed:             #181c21;
  --on-tertiary-fixed-variant:     #43474c;

  /* Status */
  --error:                         #ba1a1a;
  --on-error:                      #ffffff;
  --error-container:               #ffdad6;
  --on-error-container:            #93000a;

  /* Background aliases */
  --background:                    #fef9f2;
  --on-background:                 #1d1b17;

  /* Friendly aliases (named by intent) */
  --creme:                         #fef9f2;
  --creme-paper:                   #f6f1ea;
  --ink:                           #1d1b17;
  --ink-soft:                      #424751;
  --logo-blue:                     #00346f;
  --logo-blue-bright:              #004a99;
  --terracotta:                    #9d422b;
  --terracotta-light:              #fd8c6f;
  --hairline:                      rgba(29, 27, 23, 0.08);
  --hairline-strong:               rgba(29, 27, 23, 0.16);

  /* ===== Typography =====
     Three-font editorial system:
     - Bricolage Grotesque (sans) → body, labels, eyebrows, UI
     - Kay Pho Du (serif display) → primary headline text (the navy parts)
     - Newsreader (literary italic serif) → the SerifAccent in split
       headlines, pull quotes, testimonials */
  --font-sans:    "Bricolage Grotesque", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", Arial, sans-serif;
  --font-display: "Kay Pho Du", "Iowan Old Style", "Apple Garamond",
                  "Baskerville", "Times New Roman", "Times", serif;
  --font-serif:   "Newsreader", "Iowan Old Style", "Apple Garamond",
                  "Baskerville", "Times New Roman", "Times", serif;

  /* Scale (matches Tailwind config in reference) */
  --display-lg-size:   64px;  --display-lg-line:   72px;  --display-lg-track:  -0.02em;  --display-lg-weight: 700;
  --headline-lg-size:  40px;  --headline-lg-line:  48px;  --headline-lg-track: -0.01em;  --headline-lg-weight: 700;
  --headline-lg-mobile-size: 32px; --headline-lg-mobile-line: 40px;
  --headline-md-size:  28px;  --headline-md-line:  36px;  --headline-md-weight: 500;
  --body-lg-size:      18px;  --body-lg-line:      28px;
  --body-md-size:      16px;  --body-md-line:      24px;
  --label-sm-size:     14px;  --label-sm-line:     20px;  --label-sm-track:    0.05em;   --label-sm-weight: 500;

  /* ===== Radii ===== */
  --radius-sm:     0.125rem;  /*  2px */
  --radius:        0.25rem;   /*  4px  · DEFAULT */
  --radius-md:     0.375rem;  /*  6px */
  --radius-lg:     0.5rem;    /*  8px · cards / image containers */
  --radius-xl:     0.75rem;   /* 12px */
  --radius-full:   9999px;

  /* ===== Spacing rhythm (8px base) ===== */
  --gutter:           32px;
  --component-gap:    24px;
  --section-gap:      120px;
  --margin-mobile:    24px;
  --margin-desktop:   80px;
  --max-content:      1280px;

  /* ===== Elevation · tonal, not heavy ===== */
  --shadow-hairline:  0 0 0 1px var(--hairline);
  --shadow-soft:      0 20px 40px rgba(0, 0, 0, 0.05);
  --shadow-card:      0 1px 2px rgba(29, 27, 23, 0.04),
                      0 8px 24px rgba(29, 27, 23, 0.04);
  --shadow-modal:     0 30px 60px rgba(0, 0, 0, 0.12);
  --glass-bg:         rgba(254, 249, 242, 0.80);
  --glass-border:     rgba(254, 249, 242, 0.40);
  --glass-blur:       blur(16px);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur:         300ms;
  --dur-slow:    500ms;
}

/* ============================================================
   Base
   ============================================================ */
html { font-family: var(--font-sans); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: var(--body-md-weight, 400) var(--body-md-size)/var(--body-md-line) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primary-container); color: var(--on-primary-container); }

/* ============================================================
   Type styles · semantic + utility
   ============================================================ */
.display-lg, .t-display {
  font: 700 var(--display-lg-size)/var(--display-lg-line) var(--font-sans);
  letter-spacing: var(--display-lg-track);
  color: var(--primary);
  text-wrap: balance;
}
.headline-lg, .t-h1 {
  font: 700 var(--headline-lg-size)/var(--headline-lg-line) var(--font-sans);
  letter-spacing: var(--headline-lg-track);
  color: var(--primary);
  text-wrap: balance;
}
.headline-md, .t-h2 {
  font: 500 var(--headline-md-size)/var(--headline-md-line) var(--font-sans);
  color: var(--primary);
  text-wrap: balance;
}
.body-lg, .t-lead {
  font: 400 var(--body-lg-size)/var(--body-lg-line) var(--font-sans);
  color: var(--on-surface-variant);
}
.body-md, .t-body {
  font: 400 var(--body-md-size)/var(--body-md-line) var(--font-sans);
  color: var(--on-surface);
}
.label-sm, .t-label {
  font: 500 var(--label-sm-size)/var(--label-sm-line) var(--font-sans);
  letter-spacing: var(--label-sm-track);
  text-transform: uppercase;
  color: var(--primary);
}

/* Semantic element defaults — useful as a baseline. */
h1 { font: 700 var(--display-lg-size)/var(--display-lg-line) var(--font-sans);
     letter-spacing: var(--display-lg-track); color: var(--primary);
     margin: 0 0 24px; text-wrap: balance; }
h2 { font: 700 var(--headline-lg-size)/var(--headline-lg-line) var(--font-sans);
     letter-spacing: var(--headline-lg-track); color: var(--primary);
     margin: 0 0 16px; text-wrap: balance; }
h3 { font: 500 var(--headline-md-size)/var(--headline-md-line) var(--font-sans);
     color: var(--primary); margin: 0 0 12px; }
p  { margin: 0 0 16px; }

@media (max-width: 720px) {
  h1 { font-size: var(--headline-lg-mobile-size); line-height: var(--headline-lg-mobile-line); }
  h2 { font-size: var(--headline-lg-mobile-size); line-height: var(--headline-lg-mobile-line); }
}

/* ============================================================
   Serif accent — italic serif phrase in terracotta inside a
   sans-serif headline (the editorial display treatment).
   ============================================================ */
.t-serif,
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--secondary);
  /* Newsreader runs slightly larger on the cap line — keep tracking tight. */
  letter-spacing: -0.01em;
}

/* ============================================================
   Signature: terracotta accent line under section headers
   ============================================================ */
.terracotta-accent-line { position: relative; }
.terracotta-accent-line::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--terracotta);
}

/* Editorial bullet · terracotta dash instead of dot */
ul.editorial { list-style: none; padding: 0; margin: 0; }
ul.editorial > li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
ul.editorial > li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 18px; height: 2px;
  background: var(--terracotta);
}

/* ============================================================
   Glass / overlay
   ============================================================ */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

/* Icon font shorthand */
.icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon.filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }