/**
 * Design tokens.
 *
 * Every colour, font, radius, shadow and rhythm value used anywhere on the page
 * is declared once here and referenced by name everywhere else. The values are
 * transcribed from the approved design without rounding or substitution — if a
 * token looks oddly specific, that is because the design is.
 *
 * Naming: --dk-<role>[-<variant>]. Roles describe what a value is for, not what
 * it looks like, so a repaint is a change to this file alone.
 */

:root {
  /* ---------------------------------------------------------------- brand */
  --dk-blue: #2c63b5;              /* the single action colour */
  --dk-blue-hover: #1e4c90;        /* pressed / hovered action */
  --dk-blue-deep: #1b4a8e;         /* the darker wedge inside the logo mark */
  --dk-blue-bright: #3b76ce;       /* action hover on dark backgrounds */
  --dk-blue-pale: #7fa6dd;         /* icons and eyebrows on dark backgrounds */

  /* Tints, lightest to strongest, used as hexagon plinths and chip fills. */
  --dk-blue-wash: #e7effa;
  --dk-blue-wash-cool: #f1f4f9;
  --dk-blue-wash-warm: #eef3fa;
  --dk-blue-wash-hover: #d8e5f6;

  /* ------------------------------------------------------- dark surfaces */
  --dk-navy: #0f1a2b;              /* hero, footer, condensed mobile topbar */
  --dk-navy-quote: #132437;        /* testimonial band */
  --dk-slate: #43474c;             /* split-panel photo placeholders */
  --dk-slate-light: #53585e;       /* card and gallery photo placeholders */
  --dk-slate-hover: #41454a;

  /* ------------------------------------------------------------------ ink */
  --dk-ink-strong: #12161a;        /* the logo wordmark */
  --dk-ink: #1f262e;               /* headings */
  --dk-text: #33383c;              /* body copy */
  --dk-muted: #63676a;             /* secondary copy */
  --dk-muted-cool: #5e6265;        /* topbar icons and fine print */
  --dk-muted-warm: #5a6066;        /* chip labels, floating button glyph */
  --dk-nav-idle: #6e6e6e;          /* inactive navigation link */

  /* ------------------------------------------------------- light surfaces */
  --dk-white: #ffffff;
  --dk-beige: #f4f2ee;             /* the alternating section background */
  --dk-beige-hover: #efece6;       /* service card hover */
  --dk-warm-50: #fbfaf7;           /* service list row hover */
  --dk-warm-100: #faf8f5;          /* FAQ row hover and open state */

  /* --------------------------------------------------------------- lines */
  --dk-border: #e7e4de;            /* the default hairline */
  --dk-border-soft: #ebe7e0;       /* section seams */
  --dk-border-divider: #e3dfd7;    /* between facts in the strip */
  --dk-border-strong: #dad6ce;     /* form fields, outline buttons */
  --dk-border-stronger: #d6d1c8;   /* card affordances */
  --dk-border-button: #c9c9c9;     /* ghost buttons on light backgrounds */
  --dk-border-nav: #f0f0ee;        /* drawer row separators */

  /* --------------------------------------- amber: quality signals only */
  /* Amber never means "act" on this page — blue does. It marks ratings. */
  --dk-amber: #e8a93c;
  --dk-amber-star: #f0bc63;
  --dk-amber-ink: #8f5d0e;
  --dk-amber-wash: #fbf1df;
  --dk-amber-ring: rgba(232, 169, 60, 0.42);

  /* -------------------------------------------------------------- status */
  --dk-success: #2c7a4b;
  --dk-error: #d9534f;             /* invalid field border */
  --dk-error-text: #b23127;        /* the message next to it */
  --dk-disabled-bg: #e8eef7;
  --dk-disabled-fg: #7c90ac;

  /* ------------------------------------------------------- text on dark */
  --dk-on-dark: #ffffff;
  --dk-on-dark-body: #cfd5dc;
  --dk-on-dark-soft: #e4e7eb;
  --dk-on-dark-muted: #b9c2ce;
  --dk-on-dark-faint: #8e9aa9;
  --dk-on-dark-line: rgba(255, 255, 255, 0.1);
  --dk-on-dark-edge: rgba(255, 255, 255, 0.22);
  --dk-on-dark-edge-strong: rgba(255, 255, 255, 0.5);
  --dk-on-dark-veil: rgba(255, 255, 255, 0.06);

  /* ---------------------------------------------------------- typography */
  --dk-font-body: Barlow, Helvetica, Arial, sans-serif;
  --dk-font-display: Archivo, Helvetica, Arial, sans-serif;
  --dk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tracking steps, from tightest to widest. */
  --dk-track-tight: 0.01em;
  --dk-track-snug: 0.02em;
  --dk-track-label: 0.04em;
  --dk-track-section: 0.055em;
  --dk-track-button: 0.08em;
  --dk-track-caps: 0.09em;
  --dk-track-eyebrow: 0.24em;
  --dk-track-logo: 0.26em;
  --dk-track-footer-tag: 0.32em;

  /* --------------------------------------------------------------- radii */
  --dk-radius-xs: 8px;             /* language pills */
  --dk-radius-sm: 10px;            /* buttons and inputs */
  --dk-radius-md: 12px;            /* footer info boxes */
  --dk-radius-lg: 14px;            /* the FAQ panel */
  --dk-radius-xl: 16px;            /* cards, the form card, the action bar */
  --dk-radius-pill: 999px;

  /* ------------------------------------------------------------- shadows */
  --dk-shadow-header: 0 1px 4px rgba(0, 0, 0, 0.06);
  --dk-shadow-header-scrolled: 0 4px 18px rgba(15, 26, 43, 0.08);
  --dk-shadow-card: 0 1px 2px rgba(15, 26, 43, 0.05);
  --dk-shadow-card-hover: 0 14px 30px rgba(15, 26, 43, 0.1);
  --dk-shadow-panel: 0 1px 3px rgba(15, 26, 43, 0.05);
  --dk-shadow-form: 0 16px 40px rgba(15, 26, 43, 0.06);
  --dk-shadow-submit: 0 10px 24px rgba(44, 99, 181, 0.28);
  --dk-shadow-fab: 0 4px 14px rgba(15, 26, 43, 0.1);
  --dk-shadow-actionbar: 0 -6px 20px rgba(16, 18, 20, 0.14);

  /**
   * Focus halo for form fields.
   *
   * A composite field — the phone box holds a prefix, an input and a validity
   * tick behind one rounded, clipped border — carries the focus indicator on
   * the box rather than on the control inside it. A ring drawn around the inner
   * input would be clipped by the box and read as two stray vertical bars.
   */
  --dk-focus-halo: 0 0 0 3px rgba(44, 99, 181, 0.18);
  --dk-focus-halo-error: 0 0 0 3px rgba(217, 83, 79, 0.18);

  /* ------------------------------------------------------------ gradients */
  /* Three atmospheric washes over the dark surfaces, at three intensities. */
  --dk-glow-hero: radial-gradient(120% 90% at 50% 0%, rgba(127, 166, 221, 0.1), transparent 62%);
  --dk-glow-split: radial-gradient(110% 80% at 30% 15%, rgba(127, 166, 221, 0.09), transparent 64%);
  --dk-glow-card: radial-gradient(110% 85% at 40% 10%, rgba(127, 166, 221, 0.1), transparent 66%);
  --dk-veil-card: linear-gradient(180deg, rgba(44, 99, 181, 0) 40%, rgba(44, 99, 181, 0.35) 100%);

  /* --------------------------------------------------------------- layout */
  --dk-container: 1320px;
  --dk-gutter: 20px;
  --dk-section-pad-top: 88px;
  --dk-section-pad-bottom: 92px;

  /* Set by the scroll handler; consumed by the header progress bar. */
  --dk-progress: 0%;
  /* Set when the drawer opens, so it can sit flush under the sticky header. */
  --dk-nav-top: 150px;

  /* ------------------------------------------------------------ motion */
  --dk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dk-speed-fast: 0.2s;
  --dk-speed: 0.25s;
  --dk-speed-slow: 0.3s;
}