/* SRD exchange rates — design tokens (direction A "Krant")
   Light is the default. Dark applies with [data-theme="dark"] on <html>,
   or follows the OS until the visitor picks a theme ([data-theme="light"] opts out). */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* Colour — light */
  --bg: #F7F5EF;          /* page background, warm paper */
  --surface: #FFFFFF;     /* inputs, result box, tooltip, table */
  --surface-2: #EEEADF;   /* source notice, table header, footer, hover */
  --border: #DAD5C8;      /* hairlines, decorative frames */
  --control: #8C8676;     /* borders of inputs, buttons, change badge (3.3:1) */
  --text: #1C1B18;        /* primary text, rates, 2px section rule (15.8:1) */
  --text-2: #3B3830;      /* secondary text, field labels (10.7:1) */
  --text-muted: #57534A;  /* dates, "since yesterday", axis labels (7.0:1) */
  --accent: #2E6B36;      /* Surinamese green: kicker, info icon. Never for up/down (5.9:1) */
  --star: #C9A227;        /* logo star only, decorative, never text */
  --series-usd: #1F5FA8;  /* 5.9:1 */
  --series-eur: #A84B14;  /* 5.2:1 */
  --chart-grid: #E4DFD3;
  --skeleton: #E7E2D6;
  --shadow: 0 4px 16px rgb(28 27 24 / .12);

  /* Type */
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans: 'Source Sans 3', system-ui, sans-serif;
  --fs-rate: clamp(56px, 7.2vw, 92px);     /* serif 500, lh 1, -0.025em */
  --fs-h1: clamp(26px, 3.2vw, 40px);       /* serif 500, lh 1.15, -0.015em */
  --fs-h2: clamp(22px, 2.2vw, 28px);       /* serif 500, lh 1.2 */
  --fs-result: clamp(32px, 3.4vw, 44px);   /* serif 500, lh 1.1 */
  --fs-body: 16px;                         /* sans 400, lh 1.5 (15px ok on mobile) */
  --fs-label: 14px;                        /* sans 600 */
  --fs-small: 13px;                        /* sans 400, never smaller */

  /* Space (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 44px; --s-9: 56px;
  --gutter: clamp(16px, 4vw, 32px);
  --content-max: 1120px;

  /* Radius */
  --radius-xs: 2px;      /* series swatches, skeleton bits */
  --radius: 6px;         /* buttons, fields, notice, tooltip, table box */
  --radius-pill: 999px;  /* change badge only */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16150F;          /* warm charcoal, not pure black */
  --surface: #1F1E18;
  --surface-2: #24221B;
  --border: #34322A;
  --control: #6F6A5D;     /* 3.4:1 */
  --text: #EEEBE2;        /* 15.3:1 */
  --text-2: #D3CEC2;      /* 11.6:1 */
  --text-muted: #ABA597;  /* 7.5:1 */
  --accent: #8CC795;      /* 9.3:1 */
  --star: #D9B54A;
  --series-usd: #84B2EC;  /* 8.3:1 */
  --series-eur: #EB9A62;  /* 8.1:1 */
  --chart-grid: #2C2A23;
  --skeleton: #2A2821;
  --shadow: 0 6px 20px rgb(0 0 0 / .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16150F; --surface: #1F1E18; --surface-2: #24221B;
    --border: #34322A; --control: #6F6A5D;
    --text: #EEEBE2; --text-2: #D3CEC2; --text-muted: #ABA597;
    --accent: #8CC795; --star: #D9B54A;
    --series-usd: #84B2EC; --series-eur: #EB9A62;
    --chart-grid: #2C2A23; --skeleton: #2A2821;
    --shadow: 0 6px 20px rgb(0 0 0 / .5);
  }
}

/* Base */
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.5 var(--font-sans); }
.num { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.container { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--gutter); }

/* Section heading: 2px rule above */
.section-title { margin: 0; padding-top: 14px; border-top: 2px solid var(--text);
  font: 500 var(--fs-h2)/1.2 var(--font-serif); }

/* Rate card */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 56px; }
.rate-card { border-top: 2px solid var(--text); padding-top: var(--s-4); display: grid; gap: 10px; min-width: 0; }
.rate-card__value { font: 500 var(--fs-rate)/1 var(--font-serif); letter-spacing: -0.025em; font-variant-numeric: tabular-nums lining-nums; }
.series-swatch { display: inline-block; width: 18px; height: 3px; border-radius: var(--radius-xs); }
.series-swatch--usd { background: var(--series-usd); }
.series-swatch--eur { background: var(--series-eur); }

/* Change badge: neutral, arrow + sign carry the meaning */
.change { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 7px;
  border: 1px solid var(--control); border-radius: var(--radius-pill); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Segmented buttons (NL/EN, ranges) */
.segmented { display: flex; border: 1px solid var(--text); border-radius: var(--radius); overflow: hidden; }
.segmented button { min-height: 40px; min-width: 52px; padding: 0 12px; border: 0; background: transparent;
  color: var(--text); font: 600 14px var(--font-sans); letter-spacing: .03em; cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--text); }
.segmented button:hover { background: var(--surface-2); }
.segmented button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* Fields */
.field-label { display: block; margin-bottom: 6px; font: 600 14px var(--font-sans); color: var(--text-2); }
.field, .select { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--control);
  border-radius: var(--radius); background: var(--surface); color: var(--text); font: 500 18px var(--font-sans); }
.select { appearance: none; padding-right: 36px; font-weight: 600; font-size: 16px; letter-spacing: .04em; }
.field:disabled, .select:disabled { background: var(--surface-2); border-style: dashed; color: var(--text-muted); }

/* Buttons */
.btn { height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius); background: var(--text); color: var(--bg); font: 600 15px var(--font-sans); }
.btn-secondary { height: 40px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius); background: transparent; color: var(--text); font: 600 14px var(--font-sans); }
.icon-btn { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text); }

/* Source notice: body-size text, never collapsible */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); }
.notice strong { color: var(--text); }

/* Table */
.table-box { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.table thead th { position: sticky; top: 0; background: var(--surface-2); font-size: 13px; letter-spacing: .06em; color: var(--text-2); }
.table td { text-align: right; }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .segmented button { min-height: 44px; }
}