/* ============================================================
   TALC Design System — Colors & Type
   AI-first social media marketing · Personal Brand Building
   for Dubai Real Estate professionals.
   ============================================================ */

/* Bundled Poppins family — provided by the brand owner */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --talc-blue:        #4A67F5;   /* primary */
  --talc-blue-dark:   #2E4BDB;   /* hover / pressed */
  --talc-blue-light:  #6B85F7;   /* secondary highlights */
  --talc-blue-pale:   #EEF1FE;   /* tinted backgrounds, badges */
  --talc-black:       #0F0F12;   /* dark surfaces, body on light */
  --talc-white:       #FFFFFF;

  /* ---------- Neutrals ---------- */
  --gray:             #6B6B7A;   /* secondary text */
  --gray-mid:         #DDDDE3;   /* borders, dividers */
  --gray-light:       #F4F4F6;   /* subtle backgrounds */

  /* ---------- Semantic — Light mode ---------- */
  --bg:               var(--talc-white);
  --bg-alt:           var(--gray-light);
  --bg-tint:          var(--talc-blue-pale);
  --bg-dark:          var(--talc-black);

  --fg:               var(--talc-black);
  --fg-muted:         var(--gray);
  --fg-on-dark:       var(--talc-white);
  --fg-on-blue:       var(--talc-white);
  --accent:           var(--talc-blue);
  --accent-hover:     var(--talc-blue-dark);

  --border:           var(--gray-mid);
  --border-strong:    var(--talc-black);

  /* ---------- Type ---------- */
  --font-display:     'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:        'Poppins', system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Letter-spacing presets */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-label:   0.12em;   /* uppercase labels */
  --tracking-caps:    0.16em;   /* tight uppercase eyebrows */

  /* Line-height */
  --lh-display:       1.05;
  --lh-heading:       1.15;
  --lh-body:          1.6;
  --lh-tight:         1.2;

  /* ---------- Spacing scale ---------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* ---------- Radius ---------- */
  --radius-sm:   3px;   /* badges */
  --radius-md:   6px;   /* buttons, inputs */
  --radius-lg:   10px;  /* cards */
  --radius-xl:   14px;  /* hero cards */
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --hairline:   0.5px solid var(--border);
  --rule:       1px solid var(--border);
  --rule-blue:  1.5px solid var(--talc-blue);

  /* ---------- Shadows (used sparingly — TALC is mostly flat) ---------- */
  --shadow-sm:   0 1px 2px rgba(15, 15, 18, 0.04);
  --shadow-card: 0 1px 3px rgba(15, 15, 18, 0.06), 0 1px 2px rgba(15, 15, 18, 0.04);
  --shadow-lift: 0 10px 24px -10px rgba(15, 15, 18, 0.18);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    260ms;
}

/* ============================================================
   Base
   ============================================================ */
html, body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type — map to the brand kit roles
   Display 36–48 · H1 22–28 · H2 16–18 · Body 11–14 · Caption 8–10
   ============================================================ */

.talc-display,
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: clamp(36px, 5vw, 56px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.talc-display-xl,
.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-style: italic;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: var(--lh-heading);
  color: var(--fg);
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  line-height: var(--lh-heading);
  color: var(--fg);
}

p, .t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 13px;
  line-height: var(--lh-body);
  color: var(--fg);
}

.t-body-lg {
  font-size: 15px;
  line-height: var(--lh-body);
}

.t-body-sm {
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-caption,
.t-label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--talc-blue);
}

.t-mega-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-style: italic;
  font-size: clamp(64px, 8vw, 112px);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--talc-blue);
}

/* Italic display is the TALC signature — for the wordmark and hero lines */
.t-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ============================================================
   Utility helpers used across previews & UI kits
   ============================================================ */
.bg-blue   { background: var(--talc-blue);      color: var(--fg-on-blue); }
.bg-dark   { background: var(--talc-black);     color: var(--fg-on-dark); }
.bg-pale   { background: var(--talc-blue-pale); color: var(--talc-blue-dark); }
.bg-white  { background: var(--talc-white);     color: var(--fg); }
.fg-blue   { color: var(--talc-blue); }
.fg-muted  { color: var(--fg-muted); }