/* ============================================================================
   Kingdom ID — Royal Monogram brand layer
   Derived from assets/brand/kid/BRAND-GUIDE.md. Colour values, lockup choices
   and clear-space rules below are the guide expressed as CSS. Do not introduce
   another accent colour here; add a role instead.
   ========================================================================== */

:root {
  /* ---- Core palette (guide: Colour system) ---- */
  --kid-blue: #1a50a4;          /* Kingdom Blue  — principal identity */
  --kid-gold: #d5af3f;          /* Royal Gold    — D and approved accent */
  --kid-black: #111111;         /* Authority Black */
  --kid-ivory: #f7f3ea;         /* Warm Ivory    — premium light field */
  --kid-white: #ffffff;

  /* ---- Interface tints of the core palette ----
     These are shading of the two brand colours for hover, focus and on-dark
     legibility. They are never used to redraw the mark itself. */
  --kid-blue-deep: #143f83;
  --kid-blue-bright: #4c86de;   /* blue that stays legible on Authority Black */
  --kid-blue-wash: rgba(26, 80, 164, 0.08);
  --kid-blue-line: rgba(26, 80, 164, 0.22);
  --kid-gold-deep: #b8942f;
  --kid-gold-wash: rgba(213, 175, 63, 0.14);
  --kid-gold-line: rgba(213, 175, 63, 0.45);

  /* ---- Light field (public surfaces) ---- */
  --kid-field: var(--kid-ivory);
  --kid-panel: var(--kid-white);
  --kid-panel-sunken: #f1ece0;
  --kid-rule: #ded6c6;
  --kid-ink: #1c1b18;
  --kid-ink-soft: #5f5b52;

  /* ---- Dark field (Authority Black surfaces) ---- */
  --kid-field-dark: var(--kid-black);
  --kid-panel-dark: #1a1a1c;
  --kid-panel-dark-lift: #232326;
  --kid-rule-dark: #2f2f33;
  --kid-ink-dark: #f6f4ef;
  --kid-ink-dark-soft: #a2a099;

  /* ---- Functional states (restrained, non-competing) ---- */
  --kid-ok: #1e7a4b;
  --kid-ok-soft: rgba(30, 122, 75, 0.12);
  --kid-warn: #b27a12;
  --kid-warn-soft: rgba(178, 122, 18, 0.14);
  --kid-stop: #a32020;
  --kid-stop-soft: rgba(163, 32, 32, 0.12);

  /* ---- Typography ----
     The wordmark is outlined Palatino. Headings echo it with a classical serif
     stack; running copy uses a restrained humanist sans, as the guide permits.
     No webfont is required for either. */
  --kid-serif: "Palatino", "Palatino Linotype", "Book Antiqua", "URW Palladio L",
               Georgia, "Times New Roman", serif;
  --kid-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --kid-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- Clear space ----
     X = the diameter of the circular head of the keyhole. In the supplied
     artwork the keyhole head is 76 units wide in the 1000-unit monogram space,
     before each lockup's own transform scale. Expressed against the rendered
     height of each lockup that gives:
       01 stacked    (viewBox 1600x1000, scale 0.80)  X = 6.08% of height
       02 horizontal (viewBox 1800x700,  scale 0.78)  X = 8.47% of height
       03 emblem     (viewBox 1000x1000, scale 1.00)  X = 7.60% of height
     The lockup classes below reserve 2X around the primary and horizontal
     lockups and 1.5X around the emblem, icon and favicon. */
}

/* ============================================================================
   Lockups
   Each class carries its own minimum size from the guide, so a lockup cannot be
   shrunk below the approved floor by a layout change.
   ========================================================================== */

.kid-lockup {
  display: block;
  height: auto;
}

/* 01 — primary stacked. Official documents, certificates, enrolment. */
.kid-lockup--stacked {
  width: 220px;               /* height 137.5px; guide floor 120px wide */
  min-width: 120px;
  margin: 17px auto;          /* 2X = 12.16% of 137.5px */
}

/* 02 — horizontal. Navigation, application headers, email signature. */
.kid-lockup--horizontal {
  width: 240px;               /* height 93.3px; guide floor 180px wide */
  min-width: 180px;
  margin: 16px 0;             /* 2X = 16.94% of 93.3px */
}

/* 03/06/09 — emblem, app icon, favicon. Where Kingdom ID is understood. */
.kid-lockup--emblem {
  width: 44px;                /* guide floor 24px */
  min-width: 24px;
  margin: 5px;                /* 1.5X = 11.4% of 44px */
}

/* 05 — reversed stacked. Ships with its own Authority Black field, so it may
   only sit on a surface that is exactly Authority Black. */
.kid-lockup--reversed {
  width: 220px;
  min-width: 120px;
  margin: 17px auto;
  background: var(--kid-black);
}

/* ============================================================================
   Shared marks
   ========================================================================== */

.kid-rule-gold {
  border: 0;
  border-top: 2px solid var(--kid-gold);
  width: 56px;
  margin: 0 auto;
}

.kid-credential {
  font-family: var(--kid-mono);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}