/*
  AzatTime brand tokens. Source of truth: docs/design/color-palette.md
  and the approved design canvases in docs/design/*.dc.html.
  Four official colors (Ink, Deep, Slot, Paper) plus the tint/shade
  families the approved landing-page design builds from each of them.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Project-wide rule: every enabled, clickable button shows a hand cursor on hover. Native
   browsers don't do this by default for <button> (its default cursor is "default", not
   "pointer") — links already get a hand cursor natively, so they don't need this. A disabled
   button explicitly keeps a non-interactive cursor instead. */
button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled) {
  cursor: pointer;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  cursor: not-allowed;
}

:root {
  /* Official palette (docs/design/color-palette.md) */
  --azt-ink: #10262E;
  --azt-deep: #00648A;
  --azt-slot: #00C2A0;
  --azt-paper: #EDEFEF;

  /* Ink family — body text, dark surfaces, structural neutrals */
  /* -900/-800 lightened from near-black (0.14/0.19) to a charcoal-navy (Option C, approved by
     Product Sep 9 2026 — see docs/design/DESIGN-SYSTEM.md §1.3) after feedback that the footer
     and the dark "For service providers" band read as too black. Every consumer of these two
     tokens is a dark-surface background (verified across the whole app before changing this —
     neither is ever used as a text color), so this is safe to change once, here. */
  --azt-ink-900: oklch(0.28 0.025 215);
  --azt-ink-800: oklch(0.33 0.045 220);
  --azt-ink-700: oklch(0.22 0.035 215);
  --azt-ink-600: oklch(0.3 0.05 212);
  --azt-ink-500: oklch(0.4 0.02 210);
  --azt-ink-450: oklch(0.42 0.08 190);
  --azt-ink-420: oklch(0.45 0.025 210);
  --azt-ink-400: oklch(0.46 0.025 210);
  --azt-ink-380: oklch(0.48 0.04 210);
  --azt-ink-300: oklch(0.5 0.02 210);
  --azt-ink-250: oklch(0.55 0.02 210);
  --azt-ink-200: oklch(0.58 0.02 210);
  --azt-ink-150: oklch(0.6 0.02 210);
  --azt-ink-100: oklch(0.62 0.02 210);
  --azt-ink-70: oklch(0.28 0.03 212);
  --azt-ink-60: oklch(0.32 0.03 212);

  /* Borders / faint surfaces */
  --azt-border: oklch(0.9 0.008 210);
  --azt-border-soft: oklch(0.91 0.008 210);
  --azt-border-strong: oklch(0.88 0.01 210);
  --azt-border-hairline: oklch(0.92 0.008 210);
  --azt-border-faint: oklch(0.93 0.008 210);
  --azt-surface-tint: oklch(0.955 0.006 210);
  --azt-surface-tint-2: oklch(0.965 0.006 210);

  /* Paper family — page background, near-white */
  --azt-paper-bg: oklch(0.975 0.004 200);
  --azt-near-white: oklch(0.99 0.004 200);

  /* Slot family — primary accent (teal), reserved for CTAs */
  --azt-slot-500: oklch(0.76 0.15 174);
  --azt-slot-600: oklch(0.82 0.15 174);
  --azt-slot-650: oklch(0.84 0.15 174);
  --azt-slot-tint: oklch(0.94 0.03 178);
  --azt-slot-tint-2: oklch(0.97 0.012 190);
  --azt-slot-ink: oklch(0.18 0.04 190);
  --azt-slot-text: oklch(0.34 0.06 190);

  /* Deep family — structural accent, gradients */
  --azt-deep-500: oklch(0.44 0.13 205);
  --azt-deep-600: oklch(0.34 0.12 175);

  /* Links */
  --azt-link: oklch(0.42 0.11 200);
  --azt-link-hover: oklch(0.3 0.09 200);

  /* Type */
  --azt-font-display: 'Space Grotesk', 'Noto Sans Armenian', Helvetica, Arial, sans-serif;
  --azt-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ==========================================================
     Design-system additions (docs/design/DESIGN-SYSTEM.md).
     Approved by Product, docs/design/UI-DESIGN-DECISIONS.md.
     Additive only — nothing below is consumed by any component
     yet, so adding these tokens changes nothing visually until
     each component is migrated onto them one at a time.
     ========================================================== */

  /* Semantic — danger */
  --azt-danger: oklch(0.55 0.18 25);
  --azt-danger-bg: oklch(0.96 0.03 25);
  --azt-danger-text: oklch(0.4 0.15 25);
  --azt-danger-border: oklch(0.85 0.06 25);

  /* Semantic — warning */
  --azt-warning: oklch(0.7 0.14 85);
  --azt-warning-bg: oklch(0.95 0.04 85);
  --azt-warning-text: oklch(0.42 0.1 85);

  /* Semantic — info */
  --azt-info: oklch(0.55 0.13 230);
  --azt-info-bg: oklch(0.93 0.03 230);
  --azt-info-text: oklch(0.42 0.11 230);

  /* Semantic — success (approved: aliases onto the brand accent, not a separate green) */
  --azt-success: var(--azt-slot-500);
  --azt-success-bg: var(--azt-slot-tint);
  --azt-success-text: var(--azt-slot-text);

  /* Header/topbar gradient — was duplicated as a literal in 5 places; now one token */
  --azt-header-gradient: linear-gradient(96deg, oklch(0.95 0.045 178 / 0.92) 0%, oklch(0.96 0.03 205 / 0.9) 46%, oklch(0.955 0.035 288 / 0.9) 100%);

  /* Public site header ("Deep Ink") — the forest-to-ink-teal bar used by SiteHeader only. Kept apart
     from --azt-header-gradient, which the admin topbar and the customer/provider shells still use. */
  --azt-site-header-bg: linear-gradient(96deg, #0B3A30 0%, #10424A 52%, #183C47 100%);
  --azt-site-header-border: rgba(0, 194, 160, 0.28);
  --azt-site-header-ring: #10424A;
  --azt-site-header-fg: #EDEFEF;
  --azt-site-header-fg-muted: rgba(237, 239, 239, 0.76);
  --azt-site-header-line: rgba(255, 255, 255, 0.16);
  --azt-site-header-hover: rgba(255, 255, 255, 0.08);
  --azt-site-header-accent: #5EEAD0;
  --azt-site-header-accent-soft: rgba(0, 194, 160, 0.2);
  --azt-site-header-wordmark-time: #86E0CE;

  /* Type scale */
  --azt-text-display: 700 56px/1.05 var(--azt-font-display);
  --azt-text-h1: 700 28px/1.15 var(--azt-font-display);
  --azt-text-h2: 700 21px/1.2 var(--azt-font-display);
  --azt-text-h3: 600 16px/1.3 var(--azt-font-display);
  --azt-text-body: 400 14px/1.5 var(--azt-font-display);
  --azt-text-body-sm: 400 13.5px/1.45 var(--azt-font-display);
  --azt-text-label: 600 11px/1.3 var(--azt-font-display);
  --azt-text-eyebrow: 500 10px/1.2 var(--azt-font-mono);
  --azt-text-caption: 400 12px/1.4 var(--azt-font-display);

  /* Spacing scale */
  --azt-space-1: 4px;
  --azt-space-2: 8px;
  --azt-space-3: 12px;
  --azt-space-4: 16px;
  --azt-space-5: 20px;
  --azt-space-6: 24px;
  --azt-space-7: 32px;
  --azt-space-8: 40px;
  --azt-space-9: 56px;
  --azt-space-10: 72px;

  /* Border radius scale */
  --azt-radius-sm: 8px;
  --azt-radius-md: 11px;
  --azt-radius-lg: 14px;
  --azt-radius-xl: 18px;
  --azt-radius-2xl: 24px;
  --azt-radius-full: 999px;

  /* Shadow / elevation scale */
  --azt-shadow-none: none;
  --azt-shadow-sm: 0 2px 8px -4px oklch(0.19 0.03 220 / 0.18);
  --azt-shadow-md: 0 12px 28px -8px oklch(0.19 0.03 220 / 0.22);
  --azt-shadow-lg: 0 24px 48px -16px oklch(0.19 0.03 220 / 0.28);
  --azt-shadow-xl: 0 40px 80px -32px oklch(0.19 0.03 220 / 0.35);
}

/* Timezone presentation (docs/architecture/timezone-strategy.md): the note naming the zone times are
   shown in, and the placeholder a time value renders until the viewer's zone is known. */
.azt-tz-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--azt-info-text);
}

.azt-time-pending {
  display: inline-block;
  min-width: 2.5em;
  opacity: 0.5;
}

/* Staff access: role choice and permission switches (BIZ-007 STAFF-29), shared by the invite dialog and the Edit access drawer. */
.azt-access { display: flex; flex-direction: column; gap: 16px; }
.azt-access-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.azt-access-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.azt-access-role { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--azt-border-hairline); border-radius: 12px; cursor: pointer; font-weight: 600; }
.azt-access-role.is-on { border-color: var(--azt-deep); background: oklch(0.96 0.015 225); }
.azt-access-role:focus-within { outline: 3px solid var(--azt-deep); outline-offset: 2px; }
.azt-access-hint { margin: 0; font-size: 12.5px; color: var(--azt-ink-500); }
.azt-access-custom { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: oklch(0.95 0.04 85); color: oklch(0.42 0.1 85); font-weight: 600; }
.azt-access-wide { margin: 0; padding: 10px 12px; border-radius: 10px; background: oklch(0.93 0.03 230); color: oklch(0.42 0.11 230); font-size: 13.5px; }
.azt-access-perm { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: 1px solid var(--azt-border-hairline); }
.azt-access-summary { padding: 12px 14px; border-radius: 12px; background: oklch(0.93 0.03 230); color: oklch(0.32 0.08 230); font-size: 14px; }

/* Access history inside the "Edit access" drawer (STAFF-32) */
.azt-access-history { border-top: 1px solid oklch(0.9 0.01 230); padding-top: 12px; }
.azt-access-history-toggle { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.azt-access-history-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.azt-access-history-list li { display: grid; gap: 2px; }
.azt-access-history-when, .azt-access-history-by { font-size: 12px; opacity: 0.7; }