/* ============================================================
   CodimAI Brand Tokens  light, warm, editorial
   Grounded in the real worldlabs.ai (white/gray palette,
   Gilda Display + Roobert/grotesk, imagery-led).
   Single source of truth  all other CSS uses var(--cd-*) only.
   ============================================================ */

:root {
  /* --- Backgrounds (warm neutrals; nearly monochrome UI) --- */
  --cd-canvas:        #F7F5F0; /* page background, warm white */
  --cd-surface:       #FFFFFF; /* cards, raised panels */
  --cd-soft:          #EFEDE6; /* alternating soft sections */
  --cd-ink-block:     #1A1A18; /* dark feature blocks / footer */

  /* --- Text (warm near-black, never pure #000) --- */
  --cd-ink:           #1A1A18; /* headings, display, primary */
  --cd-body:          #3A3A36; /* body copy */
  --cd-muted:         #86847C; /* captions, labels, meta/dates */
  --cd-on-dark:       #F7F5F0; /* text on the dark ink block */
  --cd-on-dark-soft:  #C9C6BD; /* body text on the dark ink block */

  /* --- Lines / borders --- */
  --cd-border:        rgba(26,26,24,0.14); /* hairline dividers, card edges */
  --cd-border-strong: rgba(26,26,24,0.28); /* hover / emphasis */

  /* --- Radius (gentle, not pill) --- */
  --cd-radius-sm:     8px;
  --cd-radius:        12px;

  /* --- Type --- */
  --cd-font-display:  "Gilda Display", "Playfair Display", Georgia, serif;
  --cd-font-body:     "Inter", "Hanken Grotesk", system-ui, sans-serif;
  --cd-font-mono:     "JetBrains Mono", ui-monospace, monospace;

  /* --- Optional status colors (use rarely; keep muted) --- */
  --cd-success:       #2E7D5B;
  --cd-warning:       #B5781F;
  --cd-error:         #B23A36;

  /* --- WhatsApp device mock (authentic third-party UI depiction;
         used ONLY inside the .wa-phone preview, not CodimAI chrome) --- */
  --wa-header:        #008069; /* WhatsApp green header */
  --wa-header-text:   #FFFFFF;
  --wa-header-sub:    rgba(255,255,255,0.78);
  --wa-wallpaper:     #EFEAE2; /* classic beige chat background */
  --wa-bubble-in:     #FFFFFF; /* incoming bubble */
  --wa-bubble-out:    #D9FDD3; /* outgoing light-green bubble */
  --wa-bubble-text:   #111B21; /* near-black chat text */
  --wa-meta:          #667781; /* timestamps / muted */
  --wa-tick:          #53BDEB; /* read-receipt blue */
  --wa-link:          #027EB5; /* WhatsApp action blue */
}

/* --- Display headline --- */
.cd-display {
  font-family: var(--cd-font-display);
  font-weight: 400;
  color: var(--cd-ink);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* --- Primary button (quiet, near-black) --- */
.cd-btn-primary {
  height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  background: var(--cd-ink);
  color: var(--cd-on-dark);
  font-family: var(--cd-font-body);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border: none;
  border-radius: var(--cd-radius-sm);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cd-btn-primary:hover { opacity: 0.86; }

/* --- Secondary / link-style button --- */
.cd-btn-secondary {
  height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  background: transparent;
  color: var(--cd-ink);
  font-family: var(--cd-font-body);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid var(--cd-border-strong);
  border-radius: var(--cd-radius-sm);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.cd-btn-secondary:hover { border-color: var(--cd-ink); }

/* --- Card --- */
.cd-card {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  padding: 28px;
}

/* --- Dark feature block --- */
.cd-block-dark {
  background: var(--cd-ink-block);
  color: var(--cd-on-dark-soft);
}
.cd-block-dark .cd-display { color: var(--cd-on-dark); }