/* door2.pt — generated from tokens.json */
:root, [data-theme="light"] {
  --surface-100: #f2eee6; /* Page ground: warm paper by day, ink-night by night. The eroding letters and ink fields sit on it. */
  --surface-200: #faf8f3; /* Raised opaque surfaces: forms, footers, the solid fallback for glass when backdrop-filter is unavailable. */
  --surface-300: #e6e0d4; /* Sunken wells, input fills, table stripes. */
  --ink: #15171c; /* Headlines and body copy on surface-100, surface-200, surface-300, cobalt-wash and glass. 12:1 or better in both themes. */
  --ink-muted: #595d67; /* Secondary copy, captions, metadata on surface-100, surface-200 and surface-300 (5:1+ both themes). */
  --hairline: rgba(21,23,28,0.16); /* Decorative rules: section dividers, the thread lines, the dot grid. Never the only edge of a control. */
  --line-strong: #7a7e87; /* Control borders (inputs, ghost buttons, tags). 3:1+ on every surface in both themes. */
  --cobalt: #1d3aa8; /* The brand colour — azulejo ink. Primary buttons, links, the active nav item, focus ring. Text-safe on every surface (6:1+). */
  --cobalt-deep: #0e1f66; /* Pressed states, large display letters in the ink field, cobalt text on cobalt-wash. */
  --cobalt-wash: #ccd6f4; /* Tint fills: selected tags, highlighted rows, the soft half of an ink field. Ink and cobalt read on it. */
  --on-cobalt: #f7f5ef; /* Text and icons on a cobalt fill (8:1 light, 7.9:1 dark). Never literal white. */
  --neon: #ff4f86; /* The open-door line: the one slightly slanted neon rod in the mark, one per view, never a background. Exact logo colour. Decorative and graphic only on light (2.7:1 on surface-100: never text, never the only carrier of meaning); on dark it also passes as text (4.6:1+). */
  --neon-ink: #b8123f; /* The text-safe neon: required-field stars, a single "Novo" tag, inline emphasis. 5:1+ on surface-100, surface-200, surface-300 and cobalt-wash in light; 5.6:1+ on every dark surface. */
  --on-neon: #15171c; /* Text and icons on a neon fill (5.7:1 light, 6.5:1 dark). Never white. */
  --neon-glow: rgba(255,79,134,0.5); /* The halo around the neon rod and any neon edge. Decorative only — never text or borders. */
  --ink-glow: #7391f5; /* The core of an ink-field orb: a soft cornflower by day, deep navy by night, as behind the mark. Decorative only — never text. */
  --sky-glow: #b6c8ff; /* The diffuse halo of an ink-field orb; reads through glass. Decorative only. */
  --rose-glow: #f8cfdf; /* The warm counter-glow, in the neon's hue, at most one per view and always off to a corner (upper right in the mark). Decorative only. */
  --glass-fill: rgba(250,248,243,0.42); /* Liquid-glass panel fill; always paired with backdrop blur. Ink text on it stays 12:1+ over the paper ground. */
  --glass-stroke: rgba(255,255,255,0.78); /* 1px rim of a glass panel — the edge where light catches. */
  --rod-fill: rgba(255,255,255,0.24); /* Body of a glass rod (a capsule): barely tinted, so the ink behind shows through. Day lifts it, night sinks it. */
  --rod-rim: rgba(255,255,255,0.88); /* Outline of a glass rod. By day a bright white rim; by night a faint cool line, so the neon rod is the only lit thing. */
  --glass-specular: rgba(255,255,255,0.9); /* The top-left specular highlight inside glass (inset shadow + sheen). */
  --focus-ring: #1d3aa8; /* Keyboard focus: 2px solid ring, 2px offset in the page colour. 6:1+ on every surface. */
  --shadow-glass: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(255,255,255,0.25), 0 12px 40px rgba(14,31,102,0.12); /* Every glass panel: specular rim + soft lift. */
  --shadow-float: 0 2px 6px rgba(14,31,102,0.10), 0 24px 64px rgba(14,31,102,0.14); /* The fixed nav and open menus. */
  --shadow-neon: 0 0 10px rgba(255,79,134,0.55), 0 0 36px rgba(255,79,134,0.32); /* Glow of a neon element (the leaf, a neon underline). One per view. Stronger at night, where the neon is the only light. */
  --shadow-none: none; /* Opaque surfaces: paper has no shadow. */
}
[data-theme="dark"] {
  --surface-100: #0c0f1a;
  --surface-200: #151a2a;
  --surface-300: #1f2539;
  --ink: #efece4;
  --ink-muted: #a4a8b5;
  --hairline: rgba(239,236,228,0.14);
  --line-strong: #737a8f;
  --cobalt: #8aa2ff;
  --cobalt-deep: #c7d3ff;
  --cobalt-wash: #1d2a63;
  --on-cobalt: #0c0f1a;
  --neon: #ff5c92;
  --neon-ink: #ff6b9b;
  --on-neon: #0c0f1a;
  --neon-glow: rgba(255,92,146,0.65);
  --ink-glow: #1c3085;
  --sky-glow: #132652;
  --rose-glow: #3d1630;
  --glass-fill: rgba(21,26,42,0.48);
  --glass-stroke: rgba(239,236,228,0.16);
  --rod-fill: rgba(12,15,40,0.22);
  --rod-rim: rgba(176,188,232,0.28);
  --glass-specular: rgba(255,255,255,0.22);
  --focus-ring: #8aa2ff;
  --shadow-glass: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(255,255,255,0.04), 0 16px 48px rgba(0,0,0,0.45);
  --shadow-float: 0 2px 6px rgba(0,0,0,0.4), 0 24px 64px rgba(0,0,0,0.5);
  --shadow-neon: 0 0 10px rgba(255,92,146,0.85), 0 0 36px rgba(255,92,146,0.5), 0 0 90px rgba(255,92,146,0.22);
}
:root {
  --space-1: 4px; /* Icon-to-label gap, tag padding (vertical). */
  --space-2: 8px; /* Inline gaps, tight stacks. */
  --space-3: 12px; /* Tag and small button horizontal padding. */
  --space-4: 16px; /* Default gap; mobile page gutter. */
  --space-5: 24px; /* Glass card padding; grid gutter. */
  --space-6: 32px; /* Large card padding; desktop gutter. */
  --space-7: 48px; /* Gap between blocks inside a section. */
  --space-8: 64px; /* Dot-grid pitch at desktop; small section spacing. */
  --space-9: 96px; /* Section spacing on mobile. */
  --space-10: 160px; /* Section spacing on desktop — room for letters to fall. */
  --radius-xs: 4px; /* Inputs' inner chips, checkbox. */
  --radius-sm: 10px; /* Inputs, small buttons. */
  --radius-md: 18px; /* Glass cards. */
  --radius-lg: 32px; /* Hero glass panels, ink-field frames. */
  --radius-pill: 999px; /* Buttons, tags, the glass nav — liquid glass reads as a droplet. */
  --glass-blur: 18px; /* backdrop-filter on glass cards and nav. */
  --glass-blur-strong: 36px; /* Hero glass panels over busy ink fields. */
  --orb-blur: 60px; /* Filter blur on ink-field orbs. */
  --erode-blur-max: 14px; /* Blur a fully eroded letter reaches before it fades. */
  --erode-ink-opacity: 0.9; /* Background letters before erosion starts. */
  --grain-opacity: 0.09; /* Paper-grain noise laid over ink fields. */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-display-hero: 400 112px/0.95 var(--font-display); /* One hero line per page. Instrument Serif; italicise one word for voice. */
  --text-display-title: 400 64px/1 var(--font-display); /* Section openers. */
  --text-display-quote: italic 400 36px/1.15 var(--font-display); /* Testimonials and pull quotes, italic. */
  --text-erode-xl: 800 280px/0.82 var(--font-sans); /* The background letters that erode on scroll. Set in cobalt-wash or cobalt-deep at low opacity, behind content, aria-hidden. */
  --text-erode-md: 800 140px/0.85 var(--font-sans); /* Erosion on mobile and in section backgrounds. */
  --text-heading-lg: 600 32px/38px var(--font-sans); /* Card and block headings. */
  --text-heading-md: 600 22px/28px var(--font-sans); /* Service titles, form section titles. */
  --text-body-lg: 400 19px/30px var(--font-sans); /* Lead paragraphs. */
  --text-body: 400 16px/26px var(--font-sans); /* Default running text. */
  --text-body-sm: 400 14px/21px var(--font-sans); /* Captions, helper text, footers. */
  --text-label: 500 12px/16px var(--font-mono); /* Kickers, numbering, tags. Always uppercase. */
  --text-label-sm: 400 11px/14px var(--font-mono); /* Language switch, timestamps, legal. */
}
.display-hero {
  font-family: var(--font-display);
  font-size: 112px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.display-title {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.display-quote {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
}
.erode-xl {
  font-family: var(--font-sans);
  font-size: 280px;
  line-height: 0.82;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.erode-md {
  font-family: var(--font-sans);
  font-size: 140px;
  line-height: 0.85;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.heading-lg {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.heading-md {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.label-sm {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
}