/* =====================================================================
   LESTATE REAL — Colors & Type Foundations
   Vertically integrated, technology-driven real estate investment firm.
   Aesthetic: Apple HIG / iOS system language — SF Pro Display, system
   colors, Liquid Glass tiles, architectural grid on warm-neutral canvas.
   ===================================================================== */

/* ----------  FONTS  ---------- */
@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/SF-Pro-Display-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/SF-Pro-Display-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* SF Pro Rounded — softer display variant for friendly/numeric accents
   (e.g. large metric callouts, Werkr trades-facing touchpoints). */
@font-face {
  font-family: "SF Pro Rounded";
  src: url("../assets/fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     TYPE FAMILY
     ============================================================ */
  --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  /* Rounded variant — friendly accents, large metric callouts, Werkr touchpoints */
  --font-rounded: "SF Pro Rounded", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ============================================================
     CORE PALETTE
     Main color is black; canvas is a warm-neutral near-white.
     ============================================================ */
  --black: #111111;          /* primary ink — wordmarks render near-black */
  --true-black: #000000;
  --white: #ffffff;
  --canvas: #fafafa;         /* page background (Hintergrundfarbe) */

  /* Neutral ink ramp (text + lines) */
  --ink-1: #111111;          /* headings, primary text */
  --ink-2: #3a3a3c;          /* secondary text */
  --ink-3: #6c6c70;          /* tertiary / captions */
  --ink-4: #aeaeb2;          /* placeholder / disabled */
  --ink-5: #c7c7cc;          /* hairlines on light */

  /* Neutral surface ramp (greys behind glass) */
  --grey-50:  #fafafa;
  --grey-100: #f2f2f7;       /* iOS systemGray6 */
  --grey-200: #e5e5ea;       /* iOS systemGray5 */
  --grey-300: #d1d1d6;       /* iOS systemGray4 */
  --grey-400: #c7c7cc;       /* iOS systemGray3 */
  --grey-500: #aeaeb2;       /* iOS systemGray2 */
  --grey-600: #8e8e93;       /* iOS systemGray  */

  /* ============================================================
     ACCENTS
     ============================================================ */
  --blue:   #007aff;         /* Accent 1 — buttons, subheads, VALUES */
  --green:  #34c759;         /* Accent 2 — positive values, highlights */
  /* Deck accent — the blue used across the Lestate Real pitch material.
     Eyebrows and section labels adopt it so web and deck read as one system. */
  --blue-accent: #3173f6;
  --blue-accent-tint: rgba(49,115,246,0.10);
  --blue-accent-tint-2: rgba(49,115,246,0.18);

  /* Full iOS system palette (multi-color contexts, charts, status) */
  --indigo: #5856d6;         /* distinguish from blue in multi-color */
  --orange: #ff9500;         /* warnings, attention, caution */
  --pink:   #ff2d55;         /* expressive accent, special emphasis */
  --purple: #af52de;         /* secondary categorization */
  --red:    #ff3b30;         /* errors, destructive, negative values */
  --teal:   #5ac8fa;         /* informational, secondary interactive */
  --yellow: #ffcc00;         /* advisory, borderline, attention */

  /* Tinted backgrounds (12% accent over canvas) */
  --blue-tint:   rgba(0,122,255,0.12);
  --green-tint:  rgba(52,199,89,0.12);
  --orange-tint: rgba(255,149,0,0.12);
  --red-tint:    rgba(255,59,48,0.12);

  /* Semantic status */
  --success: var(--green);
  --warning: var(--orange);
  --danger:  var(--red);
  --info:    var(--blue);

  /* Pressed / hover variants of blue */
  --blue-hover:   #0a84ff;   /* lighter on hover */
  --blue-pressed: #0062cc;   /* darker on press */

  /* ============================================================
     GRADIENTS
     Wordmark ink gradient (top-light → bottom-dark) and the
     realaize "ai" blue gradient. Charts use accent gradients.
     ============================================================ */
  --grad-ink:   linear-gradient(180deg, #2b2b2e 0%, #0a0a0a 100%);
  --grad-blue:  linear-gradient(180deg, #4aa3ff 0%, #007aff 55%, #0062cc 100%);
  --grad-green: linear-gradient(180deg, #5fd97c 0%, #34c759 60%, #28a745 100%);
  --grad-chart-blue:  linear-gradient(180deg, rgba(0,122,255,0.45) 0%, rgba(0,122,255,0.02) 100%);
  --grad-chart-green: linear-gradient(180deg, rgba(52,199,89,0.45) 0%, rgba(52,199,89,0.02) 100%);

  /* ============================================================
     LIQUID GLASS  (Kacheln: blur, abgerundete Ecken)
     ============================================================ */
  --glass-bg:        rgba(255,255,255,0.62);
  --glass-bg-strong: rgba(255,255,255,0.78);
  --glass-border:    rgba(255,255,255,0.7);
  --glass-stroke:    rgba(0,0,0,0.06);   /* hairline edge on light surfaces */
  --glass-blur:      24px;
  --glass-saturate:  180%;

  /* ============================================================
     ARCHITECTURAL GRID (background pattern)
     1px lines on a fine module over the canvas.
     ============================================================ */
  --grid-line: rgba(0,0,0,0.035);
  --grid-size: 24px;

  /* ============================================================
     ELEVATION / SHADOWS
     Soft, diffuse, low-opacity — Apple-style ambient depth.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-text: 0 2px 10px rgba(0,0,0,0.18); /* wordmark drop shadow */

  /* ============================================================
     RADII  (abgerundete Ecken)
     ============================================================ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     SPACING  (4px base)
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ============================================================
     TYPE TOKENS — literal product scale (per brand spec)
     The app is dense; these are the canonical UI sizes.
     ============================================================ */
  --letter-normal: 0.5px;    /* "Normal" + "Hinweise" tracking */

  /* Überschriften — Headings */
  --h1-size: 20px; --h1-weight: 700; --h1-color: var(--ink-1); --h1-lh: 1.2;
  /* Unterüberschriften — Subheadings */
  --h2-size: 14px; --h2-weight: 700; --h2-color: var(--ink-1); --h2-lh: 1.25;
  /* Akzentüberschriften / Beschreibungen / Slogans */
  --accent-size: 12px; --accent-weight: 700; --accent-color: var(--blue);
  --accent-track: 0.3px;
  /* Normal body */
  --body-size: 12px; --body-weight: 400; --body-color: var(--ink-1); --body-lh: 1.45;
  /* Hinweise — hints/notes */
  --note-size: 12px; --note-weight: 400; --note-color: var(--ink-3); --note-lh: 1.45;
  /* Values (numeric, blue per spec) */
  --value-color: var(--blue);

  /* ============================================================
     DISPLAY SCALE — for marketing, slides, hero surfaces only.
     The product is 12–20px; large surfaces scale up from here.
     ============================================================ */
  --display-1: 72px;
  --display-2: 56px;
  --display-3: 40px;
  --display-4: 28px;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */
.ds-h1, h1.ds {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  color: var(--h1-color);
  line-height: var(--h1-lh);
  letter-spacing: -0.2px;
  margin: 0;
}
.ds-h2, h2.ds {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  color: var(--h2-color);
  line-height: var(--h2-lh);
  margin: 0;
}
.ds-accent {
  font-family: var(--font-sans);
  font-size: var(--accent-size);
  font-weight: var(--accent-weight);
  color: var(--accent-color);
  letter-spacing: var(--accent-track);
  margin: 0;
}
.ds-body, p.ds {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  color: var(--body-color);
  letter-spacing: var(--letter-normal);
  line-height: var(--body-lh);
  margin: 0;
}
.ds-note {
  font-family: var(--font-sans);
  font-size: var(--note-size);
  font-weight: var(--note-weight);
  color: var(--note-color);
  letter-spacing: var(--letter-normal);
  line-height: var(--note-lh);
  margin: 0;
}
.ds-value {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--value-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* =====================================================================
   BACKGROUND HELPERS
   ===================================================================== */
.ds-canvas {
  background-color: var(--canvas);
}
/* Architectural 1×1 grid over the canvas */
.ds-grid-bg {
  background-color: var(--canvas);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* =====================================================================
   LIQUID GLASS TILE
   ===================================================================== */
.ds-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}