/* CapitaLand Investment brand styles
   Source: PMRA design tokens at ~/.claude/skills/PMRADesign/tokens.json
   Colour scheme: Custom 594 · Font scheme: Custom 426 (Inter)
   DO NOT HAND-EDIT — derived from token file */

/* --- Fonts ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Design tokens -------------------------------------------------------- */
:root {
  /* Brand palette */
  --cli-navy:        #00005A;
  --cli-blue-mid:    #00289B;
  --cli-blue-bright: #0050F5;
  --cli-blue-light:  #64CDFF;
  --cli-cyan:        #28F5F5;
  --cli-blue-pale:   #D9F4FF;
  --cli-mint:        #DCFFFB;
  --cli-neg:         #FF1E28;
  --cli-bg:          #FFFFFF;
  --cli-chrome:      #F3F2F1;
  --cli-border:      #E6E6E6;
  --cli-muted:       #888888;

  /* Type */
  --font-base:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --base-size:       15px;
  --scale-ratio:     1.25;

  /* Space */
  --space-xs:   0.3em;
  --space-sm:   0.5em;
  --space-md:   1em;
  --space-lg:   1.5em;
  --space-xl:   2em;
  --doc-pad:    40px;
  --doc-max:    940px;
}

/* --- Base ----------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size:   var(--base-size);
  color:       var(--cli-navy);
  background:  var(--cli-bg);
  line-height: 1.5;
}

/* --- Content width -------------------------------------------------------- */
.content, .quarto-body .page-columns .column-body {
  max-width: var(--doc-max);
}

/* --- Headings ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family:    var(--font-base);
  font-weight:    600;
  letter-spacing: -0.2px;
  color:          var(--cli-navy);
  line-height:    1.2;
}
h1 { font-size: 2.1rem;  }
h2 { font-size: 1.55rem; border-bottom: 3px solid var(--cli-blue-bright); padding-bottom: 0.2em; margin-top: 1.8em; }
h3 { font-size: 1.2rem;  }

/* --- Links ---------------------------------------------------------------- */
a                   { color: var(--cli-blue-bright); }
a:hover             { color: var(--cli-blue-mid); }

/* --- Navbar --------------------------------------------------------------- */
.navbar             { background-color: var(--cli-navy) !important; border-radius: 0; }
.navbar-brand,
.navbar-nav .nav-link  { color: #FFFFFF !important; font-weight: 500; font-size: 0.9rem; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--cli-blue-light) !important; }
.navbar-brand       { font-weight: 700; letter-spacing: -0.3px; }

/* --- Tables --------------------------------------------------------------- */
table               { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
thead th            { background: var(--cli-navy); color: #FFFFFF; font-weight: 600;
                      padding: 8px 12px; text-align: left; border: none; }
tbody tr:nth-child(even) { background: var(--cli-chrome); }
tbody td            { padding: 7px 12px; border-bottom: 1px solid var(--cli-border); }
.table-caption, caption { font-size: 0.8rem; color: var(--cli-muted); text-align: left;
                      margin-top: 4px; font-style: italic; }

/* --- Data vintage badge --------------------------------------------------- */
.data-vintage {
  display:       inline-block;
  background:    var(--cli-blue-pale);
  color:         var(--cli-navy);
  font-size:     0.78rem;
  font-weight:   500;
  padding:       3px 10px;
  border-left:   3px solid var(--cli-blue-bright);
  margin-bottom: 1.2rem;
  letter-spacing: 0.01em;
}

/* --- Metric callout boxes ------------------------------------------------- */
.metric-box {
  display:       inline-block;
  background:    var(--cli-blue-pale);
  border-left:   4px solid var(--cli-navy);
  padding:       14px 20px;
  margin:        8px 12px 8px 0;
  min-width:     180px;
  vertical-align: top;
}
.metric-box p:first-of-type {
  font-size:   2rem;
  font-weight: 700;
  color:       var(--cli-navy);
  line-height: 1.0;
  margin:      0 0 4px 0;
}
.metric-box p:last-of-type {
  font-size:  0.8rem;
  color:      var(--cli-muted);
  margin:     0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* --- Eyebrow treatment ---------------------------------------------------- */
.eyebrow {
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--cli-blue-mid);
}

/* --- Callout boxes -------------------------------------------------------- */
.callout               { border-left: 4px solid var(--cli-blue-bright); border-radius: 0; }
.callout-note          { border-left-color: var(--cli-blue-mid); background: var(--cli-blue-pale); }
.callout-note .callout-title { color: var(--cli-navy); font-weight: 600; }
.callout-warning       { border-left-color: #D97706; background: #FEF3C7; }

/* --- Code ----------------------------------------------------------------- */
code, pre { font-family: var(--font-mono); font-size: 0.88em; }
pre       { background: var(--cli-chrome); padding: 12px; border-left: 3px solid var(--cli-blue-bright); }

/* --- Coverage RAG colours ------------------------------------------------- */
.rag-red   { color: var(--cli-neg);    font-weight: 600; }
.rag-amber { color: #D97706;           font-weight: 600; }
.rag-green { color: var(--cli-blue-bright); font-weight: 600; }

/* --- Figure captions ------------------------------------------------------ */
.figure-caption, figcaption {
  font-size:  0.8rem;
  color:      var(--cli-muted);
  margin-top: 4px;
}

/* --- Horizontal rules ----------------------------------------------------- */
hr { border: none; border-top: 1px solid var(--cli-border); margin: 2rem 0; }

/* --- Print / PDF ---------------------------------------------------------- */
@media print {
  .navbar, .sidebar, .toc,
  .quarto-sidebar, #quarto-sidebar,
  #TOC, .nav-page                   { display: none !important; }

  body        { font-size: 10pt; color: #000000; }
  h1          { font-size: 18pt; page-break-after: avoid; }
  h2          { font-size: 13pt; page-break-after: avoid;
                border-bottom: 2pt solid #0050F5; }
  h3          { font-size: 11pt; page-break-after: avoid; }

  img, figure { max-width: 100% !important; page-break-inside: avoid; }
  table       { page-break-inside: avoid; font-size: 9pt; }
  pre, code   { font-size: 8pt; }

  a[href]::after { content: none; }   /* suppress URL printing */

  .callout-note { border: 1pt solid #00289B; background: none; }
  .data-vintage { border: 1pt solid #0050F5; background: none; }
  .metric-box   { border: 1pt solid #00005A; background: none; }
}