/* Dijkstraglas — design tokens (gegenereerd uit het design system) */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Dijkstraglas — Webfonts
   Loaded from Google Fonts CDN. SUBSTITUTION NOTE: the old
   dijkstraglas.nl site had no defined brand typeface, so these
   are a fresh, intentional pairing for the redesign. To self-host
   for production, download the woff2 files and replace the @import
   below with local @font-face rules.

     Display : Bricolage Grotesque — characterful architectural grotesque
     Body    : Hanken Grotesk      — clean, warm, highly legible
     Mono    : JetBrains Mono      — specs, dimensions, phone numbers
   ============================================================ */

/* Fonts worden self-hosted geladen via css/fonts.css — zie AVG-notitie daar. */

:root {
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}


/* ===== tokens/colors.css ===== */
/* ============================================================
   Dijkstraglas — Color tokens
   Palette is taken straight from the real Dijkstra Glas logo:
   vivid YELLOW background, RED wordmark, INDIGO/blue-violet
   ("glas en schilderwerken" + starburst + bottom band).
   Yellow + red lead; indigo carries dark sections & headings.

   Ramp variable names are kept stable for compatibility:
     --amber-*  →  the brand YELLOW
     --glass-*  →  the brand INDIGO / blue-violet
     --red-*    →  the brand RED
     --slate-*  →  neutral greys
   ============================================================ */

:root {
  /* ---- Brand RED (wordmark, primary actions) ---- */
  --red-50:  #FDECEA;
  --red-100: #FBD2CE;
  --red-200: #F4A39B;
  --red-300: #EC6E62;
  --red-400: #E5453A;
  --red-500: #E1251B; /* logo red */
  --red-600: #C71D14; /* primary action */
  --red-700: #A5160F;
  --red-800: #82110C;
  --red-900: #5E0D09;

  /* ---- Brand YELLOW (accent / signature pop) ---- */
  --amber-50:  #FFFBEB;
  --amber-100: #FFF3C4;
  --amber-200: #FFE899;
  --amber-300: #FFDD5C;
  --amber-400: #FFD400; /* logo yellow — accent */
  --amber-500: #F2C200;
  --amber-600: #D9A400;
  --amber-700: #A87C00;

  /* ---- Brand INDIGO / blue-violet (dark sections, headings) ---- */
  --glass-50:  #ECECF7;
  --glass-100: #D8D7EF;
  --glass-200: #B4B2DF;
  --glass-300: #8B89CC;
  --glass-400: #5755B4;
  --glass-500: #34338C;
  --glass-600: #2E2D87; /* logo indigo */
  --glass-700: #262570;
  --glass-800: #1E1D58;
  --glass-900: #161542; /* dark surfaces */
  --glass-950: #0E0D2B;

  /* ---- Neutral grey ---- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FAFAFB;
  --slate-50:  #F4F4F6;
  --slate-100: #EAEAEE;
  --slate-200: #D8D8DF;
  --slate-300: #BBBBC5;
  --slate-400: #91919E;
  --slate-500: #6A6A78;
  --slate-600: #4E4E5A;
  --slate-700: #393943;
  --slate-800: #26262E;
  --slate-900: #16161C;
  --ink:       #0C0C11;

  /* ---- Semantic hues ---- */
  --danger-50:  #FCEDE9;
  --danger-500: #DD3A1F; /* glass damage / urgent */
  --danger-600: #B82B14;
  --success-50:  #E8F5EC;
  --success-500: #2E9E5B;
  --success-600: #1F7A44;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Brand = RED */
  --brand:          var(--red-600);
  --brand-hover:    var(--red-700);
  --brand-active:   var(--red-800);
  --brand-subtle:   var(--red-50);
  --brand-border:   var(--red-200);
  --brand-contrast: #FFFFFF;

  /* Accent = YELLOW (text on it is dark indigo) */
  --accent:         var(--amber-400);
  --accent-hover:   var(--amber-500);
  --accent-subtle:  var(--amber-50);
  --accent-contrast:#1A1840;

  /* Indigo helpers (dark brand surfaces) */
  --indigo:         var(--glass-600);

  /* Text */
  --text-strong:  var(--glass-900);
  --text-body:    var(--slate-700);
  --text-muted:   var(--slate-500);
  --text-faint:   var(--slate-400);
  --text-inverse: var(--slate-25);
  --text-brand:   var(--red-600);
  --text-on-dark-muted: #B9B8DA;

  /* Surfaces */
  --surface-page:    var(--slate-25);
  --surface-card:    var(--slate-0);
  --surface-sunk:    var(--slate-50);
  --surface-raised:  #FFFFFF;
  --surface-dark:    var(--glass-900);
  --surface-darker:  var(--glass-950);
  --surface-glass:   rgba(255, 255, 255, 0.62); /* translucent — use with blur */
  --surface-glass-dark: rgba(22, 21, 66, 0.55);

  /* Borders */
  --border-subtle:  var(--slate-100);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-dark:    rgba(255, 255, 255, 0.14);
  --border-brand:   var(--red-200);

  /* Focus ring */
  --focus-ring: rgba(225, 37, 27, 0.38);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   Dijkstraglas — Typography scale
   Fluid display sizes for marketing surfaces, fixed steps for UI.
   ============================================================ */

:root {
  /* ---- Weights ---- */
  --fw-light:    300; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extra:    800; /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-normal:  1.5;  /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em; /* @kind other */
  --tracking-snug:   -0.01em; /* @kind other */
  --tracking-normal: 0;       /* @kind other */
  --tracking-wide:   0.04em;  /* @kind other */
  --tracking-label:  0.14em;  /* @kind other */ /* uppercase eyebrows / labels */

  /* ---- Display scale (fluid, marketing) ---- */
  --text-display-xl: clamp(3rem, 1.6rem + 6.2vw, 6.5rem);   /* @kind other */
  --text-display-l:  clamp(2.5rem, 1.5rem + 4.4vw, 4.5rem); /* @kind other */
  --text-display-m:  clamp(2rem, 1.4rem + 2.8vw, 3.25rem);  /* @kind other */
  --text-display-s:  clamp(1.6rem, 1.2rem + 1.7vw, 2.25rem);/* @kind other */

  /* ---- Body / UI scale (fixed) ---- */
  --text-xs:  0.75rem;   /* @kind other */
  --text-sm:  0.875rem;  /* @kind other */
  --text-md:  1rem;      /* @kind other */
  --text-lg:  1.125rem;  /* @kind other */
  --text-xl:  1.375rem;  /* @kind other */
  --text-2xl: 1.75rem;   /* @kind other */

  /* ---- Eyebrow / label ---- */
  --text-eyebrow: 0.8125rem; /* @kind other */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Dijkstraglas — Spacing, radii, layout
   8px base rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  3rem;    /* 48 */
  --space-8:  4rem;    /* 64 */
  --space-9:  6rem;    /* 96 */
  --space-10: 8rem;    /* 128 */

  /* ---- Radii — measured, mostly crisp (glass = clean edges) ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --gutter:         clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   Dijkstraglas — Effects: shadows, blur, transitions
   Soft, cool-tinted shadows (never pure black). Glass surfaces
   pair translucency with backdrop blur.
   ============================================================ */

:root {
  /* ---- Elevation — neutral cool-dark tint, low spread ---- */
  --shadow-xs: 0 1px 2px rgba(22, 21, 52, 0.07);
  --shadow-sm: 0 1px 3px rgba(22, 21, 52, 0.09), 0 1px 2px rgba(22, 21, 52, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 21, 52, 0.10), 0 1px 3px rgba(22, 21, 52, 0.07);
  --shadow-lg: 0 14px 40px rgba(22, 21, 52, 0.14), 0 4px 12px rgba(22, 21, 52, 0.08);
  --shadow-xl: 0 28px 70px rgba(22, 21, 52, 0.18), 0 8px 20px rgba(22, 21, 52, 0.09);

  /* Brand-tinted glows */
  --shadow-brand: 0 10px 30px rgba(225, 37, 27, 0.30);
  --shadow-accent: 0 10px 28px rgba(255, 200, 0, 0.42);

  /* Hairline ring (used with shadows for crisp card edges) */
  --ring-hairline: inset 0 0 0 1px rgba(22, 21, 52, 0.07); /* @kind shadow */

  /* ---- Blur (frosted glass) ---- */
  --blur-glass: saturate(140%) blur(14px); /* @kind other */
  --blur-soft:  blur(6px); /* @kind other */

  /* ---- Transitions ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   Dijkstraglas — base element styles & helpers
   Light reset + sensible typographic defaults bound to tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--brand-active); }

/* ---- Eyebrow / kicker label ---- */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-brand);
}

/* ---- Frosted glass surface helper ---- */
.ds-glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

::selection { background: var(--amber-300); color: var(--ink); }