/*
 * ùrlar design system — standardised tokens + component classes.
 *
 * HOW IT WORKS
 * 1. Tokens live in :root as --ds-* custom properties. Re-skin a whole site by
 *    overriding these in one place (or in a client override block below).
 * 2. Component/utility classes (.ds-*) build on the tokens. GenerateBlocks blocks
 *    reference these via the block's "Additional CSS class(es)" field, and the
 *    html-to-generateblocks skill emits them in "design-system mode".
 * 3. theme.json surfaces the same tokens as editor colour/size swatches.
 *
 * Keep this file as the single source of truth. Per-client tweaks = override the
 * tokens in the CLIENT OVERRIDES block at the bottom, not the component rules.
 */

/* ============================================================ TOKENS */
:root {
  /* Brand */
  --ds-primary: #1a73e8;
  --ds-primary-dark: #1558b0;
  --ds-accent: #10b981;

  /* Ink / text */
  --ds-ink: #0a0a0a;          /* headings */
  --ds-body: #404552;         /* body copy */
  --ds-muted: #6b7280;        /* secondary text */

  /* Surfaces */
  --ds-bg: #ffffff;
  --ds-surface: #f7f7f8;      /* cards / subtle panels */
  --ds-border: #e5e7eb;
  --ds-inverse: #0a0a0a;      /* dark sections */
  --ds-inverse-text: #f5f5f5;

  /* Typography */
  --ds-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-font-head: var(--ds-font-body);
  --ds-text-xs: 0.8125rem;
  --ds-text-sm: 0.9375rem;
  --ds-text-base: 1.0625rem;
  --ds-text-lg: 1.25rem;
  --ds-text-xl: 1.5rem;
  --ds-text-2xl: 2rem;
  --ds-text-3xl: clamp(2rem, 5vw, 3rem);
  --ds-text-display: clamp(2.5rem, 6vw, 4rem);
  --ds-leading-tight: 1.15;
  --ds-leading: 1.6;
  --ds-weight-normal: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-black: 800;

  /* Spacing scale */
  --ds-space-3xs: 0.25rem;
  --ds-space-2xs: 0.5rem;
  --ds-space-xs: 0.75rem;
  --ds-space-sm: 1rem;
  --ds-space-md: 1.5rem;
  --ds-space-lg: 2rem;
  --ds-space-xl: 3rem;
  --ds-space-2xl: 4rem;
  --ds-space-3xl: 6rem;

  /* Radius / shadow / motion / layout */
  --ds-radius-sm: 0.375rem;
  --ds-radius: 0.75rem;
  --ds-radius-lg: 1.25rem;
  --ds-radius-full: 9999px;
  --ds-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --ds-shadow-lg: 0 10px 30px rgba(0,0,0,.10);
  --ds-container: 1100px;
  --ds-container-wide: 1280px;
  --ds-transition: 0.2s ease;
}

/* ============================================================ LAYOUT */
.ds-section { padding-block: var(--ds-space-3xl); padding-inline: var(--ds-space-md); }
.ds-section--tight { padding-block: var(--ds-space-xl); }
.ds-section--dark { background: var(--ds-inverse); color: var(--ds-inverse-text); }
.ds-section--dark .ds-h2,
.ds-section--dark .ds-display { color: #fff; }

.ds-container { max-width: var(--ds-container); margin-inline: auto; }
.ds-container--wide { max-width: var(--ds-container-wide); }
.ds-container--narrow { max-width: 720px; margin-inline: auto; }

.ds-stack > * + * { margin-top: var(--ds-space-md); }

.ds-grid { display: grid; gap: var(--ds-space-lg); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================ TYPOGRAPHY */
.ds-eyebrow {
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ds-primary);
}
.ds-display {
  font-family: var(--ds-font-head); font-size: var(--ds-text-display);
  font-weight: var(--ds-weight-black); line-height: var(--ds-leading-tight); color: var(--ds-ink);
}
.ds-h2 {
  font-family: var(--ds-font-head); font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-bold); line-height: var(--ds-leading-tight); color: var(--ds-ink);
}
.ds-h3 {
  font-family: var(--ds-font-head); font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-bold); line-height: var(--ds-leading-tight); color: var(--ds-ink);
}
.ds-lead { font-size: var(--ds-text-lg); color: var(--ds-body); line-height: var(--ds-leading); }
.ds-body { font-size: var(--ds-text-base); color: var(--ds-body); line-height: var(--ds-leading); }
.ds-muted { color: var(--ds-muted); }
.ds-text-center { text-align: center; }

/* ============================================================ BUTTONS */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--ds-space-2xs);
  padding: var(--ds-space-xs) var(--ds-space-md); border-radius: var(--ds-radius-full);
  font-weight: var(--ds-weight-semibold); line-height: 1; text-decoration: none;
  cursor: pointer; border: 0; transition: transform var(--ds-transition), background-color var(--ds-transition);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn--primary { background-color: var(--ds-primary); color: #fff; }
.ds-btn--primary:hover { background-color: var(--ds-primary-dark); }
.ds-btn--ghost { background: transparent; color: var(--ds-primary); box-shadow: inset 0 0 0 1px var(--ds-border); }
.ds-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ds-primary); }

/* ============================================================ CARDS / PILLS */
.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); padding: var(--ds-space-lg);
}
.ds-card--raised { background: var(--ds-bg); box-shadow: var(--ds-shadow); border-color: transparent; }
.ds-card__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold); color: var(--ds-ink); }
.ds-pill {
  display: inline-flex; align-items: center; padding: var(--ds-space-3xs) var(--ds-space-xs);
  border-radius: var(--ds-radius-full); background: var(--ds-surface);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-body);
}

/* ============================================================ CLIENT OVERRIDES
 * Melbourne Heritage Tiles brand tokens. Override only tokens here, never the
 * component rules, so every component and the theme.json editor swatches pick up
 * the brand automatically. Values are authoritative OKLCH, matched to the
 * homepage build. Cool slate palette, one muted slate-blue accent.
 */
:root {
  /* Accent: muted slate blue-gray (from the star tiles) */
  --ds-primary:       oklch(45% 0.05 250);    /* links, eyebrows on light */
  --ds-primary-dark:  oklch(41% 0.045 250);   /* hover / pressed */
  --ds-accent:        oklch(54% 0.045 250);   /* diamond marks, decorative */

  /* Ink / text (cool slate, no brown) */
  --ds-ink:    oklch(26% 0.006 250);
  --ds-body:   oklch(42% 0.007 250);
  --ds-muted:  oklch(54% 0.006 250);

  /* Surfaces */
  --ds-bg:        oklch(98.6% 0.002 250);     /* paper */
  --ds-surface:   oklch(96.3% 0.004 250);     /* panel */
  --ds-surface-2: oklch(93.3% 0.006 250);     /* stone (cards) */
  --ds-border:    oklch(90.5% 0.006 250);     /* line */

  /* Dark cards / footer */
  --ds-inverse:         oklch(25% 0.006 250);
  --ds-inverse-text:    oklch(93% 0.004 250);
  --ds-inverse-muted:   oklch(78% 0.006 250);
  --ds-inverse-accent:  oklch(76% 0.035 250);

  /* Typography: Libre Caslon (display/headings) + Archivo (body/UI) */
  --ds-font-head: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --ds-font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-text-sm:      0.9rem;
  --ds-text-base:    1.0625rem;
  --ds-text-lg:      1.15rem;
  --ds-text-xl:      1.6rem;
  --ds-text-2xl:     clamp(1.5rem, 3vw, 2.15rem);
  --ds-text-3xl:     clamp(2.1rem, 4.2vw, 3.25rem);
  --ds-text-display: clamp(2.4rem, 4.8vw, 4.1rem);
  --ds-text-eyebrow: 0.78rem;
  --ds-leading-tight: 1.1;
  --ds-leading: 1.65;

  /* Soft corners */
  --ds-radius-sm:   10px;
  --ds-radius:      16px;
  --ds-radius-lg:   26px;
  --ds-radius-full: 999px;

  /* Cool, barely-there shadows */
  --ds-shadow:    0 1px 2px oklch(30% 0.006 250 / .06), 0 6px 18px oklch(30% 0.006 250 / .06);
  --ds-shadow-lg: 0 30px 70px oklch(24% 0.01 250 / .22);

  --ds-container: 1312px;   /* 82rem, matches homepage */
}