/* =============================================================================================
   Vanilla Sky design tokens.

   Transcribed from the normative token sheet, "Foundation - Tokens & Components". Values here are
   the design's, not an interpretation of them: contrast ratios were computed by the designer
   against real backgrounds and every one of them is WCAG 2.2 AA on its stated surface.

   Nothing in this file is a component. Components consume these names; they never restate a hex.
   That is what makes a palette change one edit rather than a search.
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   Fonts, self-hosted.

   The design sheet links Google Fonts. This application's content security policy is
   `default-src 'self'` with `font-src 'self' data:`, so a third-party font host would simply be
   blocked -- and shipping the fonts ourselves also means no request to a third party carries a
   customer's IP address on every page view.

   Noto Sans Georgian ships in 400 and 700 only. The weight descriptors below map the design's 500
   onto the regular face and its 600 onto the bold face, which is the closest honest fit; without
   the descriptors the browser would pick a face per glyph run and Georgian would drift against
   Latin mid-sentence.
   --------------------------------------------------------------------------------------------- */

@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('../fonts/NotoSansGeorgian-Regular.woff') format('woff');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('../fonts/NotoSansGeorgian-Bold.woff') format('woff');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* The display face, for public headings.

   One file per script rather than per weight: Noto Serif Georgian is a variable font, so a single
   woff2 covers the whole 400-700 axis and the browser interpolates between them. The unicode-range
   split is what keeps the Georgian file off an English page and the Latin file off a Georgian one.

   Russian is deliberately absent. This family has no Cyrillic, so a Russian heading falls through
   the stack to Noto Sans -- which is the designed behaviour, not a gap. */
@font-face {
  font-family: 'Noto Serif Georgian';
  src: url('../fonts/NotoSerifGeorgian-Georgian.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

@font-face {
  font-family: 'Noto Serif Georgian';
  src: url('../fonts/NotoSerifGeorgian-Latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cyrillic only. The unicode-range keeps this half-megabyte file off every Georgian and English
   page load; a Russian page fetches it, nobody else does. */
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}

:root {
  /* -------------------------------------------------------------------------------------------
     Colour. Contrast ratios are the design's computed values against ivory #FAF7F0.
     ------------------------------------------------------------------------------------------- */

  --color-action-primary: #7A1F2D;        /* brand burgundy; white on it 10.2:1 */
  --color-action-primary-hover: #641823;  /* white on it 12.6:1 */
  --color-action-primary-deep: #521320;
  --color-action-primary-wash: #FAF3F0;   /* secondary-button hover fill */

  --color-bg-page: #FAF7F0;               /* warm ivory */
  --color-bg-surface: #FFFFFF;            /* cards, inputs, tables */
  --color-bg-sand: #F1EAE0;               /* section alternation, admin shell, skeletons */
  --color-bg-sand-deep: #F5EFE6;          /* disabled fills, tertiary hover */

  --color-text-primary: #2B2724;          /* charcoal, 13.8:1 */
  --color-text-secondary: #6B6259;        /* labels and meta, 5.6:1 */
  --color-text-disabled: #8F857A;
  --color-text-faint: #B5AC9F;

  --color-accent-gold-text: #8C6A1D;      /* 4.7:1 -- eyebrows and price accents, 14px+ only */
  --color-accent-gold-deco: #C9962E;      /* 3.1:1 -- rules and icons only, NEVER text */

  --color-border: #DDD3C4;                /* cards, tables, dividers */
  --color-border-input: #B5AC9F;          /* 3.0:1, passes non-text contrast */
  --color-border-hairline: #EFE8DC;
  --color-border-disabled: #E5DCCE;

  --color-status-success: #2F6B4E;        /* 5.9:1 */
  --color-status-success-bg: #EBF2EE;
  --color-status-success-border: #BDD5C8;
  --color-status-success-text: #23513B;

  --color-status-warning: #925C0B;        /* 5.2:1 */
  --color-status-warning-bg: #FBF3E4;
  --color-status-warning-border: #E3CFA3;
  --color-status-warning-text: #6B4E12;

  --color-status-error: #A8231C;          /* 6.7:1 */
  --color-status-error-bg: #FBF0EF;
  --color-status-error-border: #E8B7B3;

  --color-status-info: #35566B;           /* 7.3:1 -- also the focus ring */
  --color-status-info-bg: #EEF2F5;
  --color-status-info-border: #C3D0DA;

  --color-neutral-chip-bg: #F1EAE0;
  --color-neutral-chip-text: #57504A;

  /* -------------------------------------------------------------------------------------------
     Type. One family across KA / EN / RU keeps vertical metrics stable between languages.

     Noto Serif Georgian is bundled above and is what --font-display resolves to for Georgian and
     Latin headings. The rest of the stack is the fallback chain for scripts it does not cover.
     ------------------------------------------------------------------------------------------- */

  --font-ui: 'Noto Sans Georgian', 'Noto Sans', system-ui, sans-serif;
  --font-display: 'Noto Serif Georgian', 'Noto Sans Georgian', 'Noto Sans', serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;

  --text-display-40: 40px;
  --text-heading-28: 28px;
  --text-heading-22: 22px;
  --text-title-17: 17px;
  --text-body-15: 15px;
  --text-ui-14: 14px;
  --text-caption-12: 12px;

  --leading-display: 1.15;
  --leading-heading: 1.3;
  --leading-body: 1.55;

  /* Spacing -- 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius. */
  --radius-input: 4px;
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Elevation. A resting card has a border and no shadow -- deliberately, so the page reads flat
     and elevation means "this floats above the page" rather than "this is a box". */
  --shadow-1: 0 2px 8px rgba(43, 39, 36, 0.10);   /* popovers, sticky bars */
  --shadow-2: 0 8px 28px rgba(43, 39, 36, 0.18);  /* dialogs, drawers */

  /* Focus. Never overridden, never removed. */
  --focus-ring-color: #35566B;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Layout. */
  --content-wide: 1200px;
  --content-narrow: 720px;
  --touch-target: 44px;
}

/* =============================================================================================
   Base
   ============================================================================================= */

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

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

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 16px;              /* public body minimum */
  line-height: var(--leading-body);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--leading-heading);
}

p {
  margin: 0;
}

a {
  color: var(--color-action-primary);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-action-primary-deep);
}

img {
  max-width: 100%;
}

/* One focus treatment for everything. `:focus-visible` rather than `:focus` so a mouse click on a
   button does not leave a ring behind, while every keyboard path still shows one. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Blazor focuses the page's heading after a navigation so a screen reader announces the new page,
   and adds tabindex="-1" to make that possible. Chromium counts that programmatic focus as
   focus-visible, so without this every page load draws a ring around its own title before anybody
   has touched anything -- which reads as a rendering fault.

   Scoped to headings on purpose. A heading is never an interaction target, so a ring on one tells a
   keyboard user nothing about where their next keystroke goes. Everything that IS a target, and the
   landmarks and alerts that receive focus deliberately, keep theirs. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus {
  outline: none;
}

/* Reduced motion is honoured globally rather than per-component, because a component that forgets
   is a component that moves. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden but available to assistive technology. Used for the skip link's target label,
   table captions and the live-region text that accompanies every status colour. */
.vs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vs-skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-action-primary);
  color: #FFF;
  border-radius: var(--radius-button);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease-out;
}

.vs-skip-link:focus {
  top: var(--space-4);
  color: #FFF;
}