/* Shared design tokens and interaction foundations. See docs/UI_GUIDELINES.md. */
@font-face {
  font-family: "Pogonia";
  src: url("../fonts/WOFF/Pogonia-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "The Year of Handicrafts";
  src: url("../fonts/handicrafts/TheYearofHandicrafts-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "The Year of Handicrafts";
  src: url("../fonts/handicrafts/TheYearofHandicrafts-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "The Year of Handicrafts";
  src: url("../fonts/handicrafts/TheYearofHandicrafts-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "The Year of Handicrafts";
  src: url("../fonts/handicrafts/TheYearofHandicrafts-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "The Year of Handicrafts";
  src: url("../fonts/handicrafts/TheYearofHandicrafts-Black.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("../fonts/WOFF/Pogonia-Medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("../fonts/WOFF/Pogonia-Semibold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("../fonts/WOFF/Pogonia-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --ui-ink: #0b0b0b;
  --ui-carbon: #0b0b0b;
  --ui-paper: #ebeae4;
  --ui-charcoal: #111410;
  --ui-forest: var(--ui-charcoal);
  --ui-canvas: var(--ui-paper);
  --ui-surface: #fff;
  --ui-accent: #9b7624;
  --ui-text: #1e293b;
  --ui-muted: #475569;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-radius-control: 8px;
  --ui-radius-panel: 12px;
  --ui-heading: "Pogonia", ui-sans-serif, system-ui, sans-serif;
  --ui-arabic: "The Year of Handicrafts", "Tahoma", sans-serif;
}
:root :is(h1, h2, h3, h4, h5, h6) { font-family: var(--ui-heading); }
:root :is(h1, h2, h3, h4, h5, h6) em { font-style: normal; }
:root :is(.signature-collection h3, .collection-hero h1) { font-family: "ATOM", var(--ui-heading); }
html[lang="ar"] :is(body, button, input, select, textarea, summary) { font-family: var(--ui-arabic); }
html[lang="ar"] .caventa-system,
html[lang="ar"] .luxury-button.luxury-button,
html[lang="ar"] :is(.signature-line-link, .text-link, .button) { font-family: var(--ui-arabic); }
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6),
html[lang="ar"] .caventa-system :is(h1, h2, h3, .system-metric h2) { font-family: var(--ui-arabic); letter-spacing: 0; }
html[lang="ar"] :is(.signature-collection h3, .collection-hero h1) { font-family: "ATOM", var(--ui-arabic); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 20px; background: var(--ui-surface); color: var(--ui-ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
:where(.admin-button, .danger-button, .luxury-button, button[type="submit"], button:not([type])) { width: fit-content; max-width: 100%; justify-self: start; align-self: start; }
.record-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ui-muted); font-size: 14px; }
.record-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.record-breadcrumbs [aria-current] { color: var(--ui-text); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Field focus thickens the border inward, preserving control dimensions. */
:root :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
  border: 1px solid var(--ui-accent);
  padding: var(--field-pad-y, 14px) var(--field-pad-right, 16px) var(--field-pad-y, 14px) var(--field-pad-left, 16px);
}
:root :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea):is(:focus, :focus-visible, :active) {
  border: 2px solid var(--ui-accent);
  padding: calc(var(--field-pad-y, 14px) - 1px) calc(var(--field-pad-right, 16px) - 1px) calc(var(--field-pad-y, 14px) - 1px) calc(var(--field-pad-left, 16px) - 1px);
  outline: none;
  box-shadow: none;
}
.admin-navbar .system-search input[type="search"] { --field-pad-y: 10px; --field-pad-right: 72px; --field-pad-left: 44px; }
@media (max-width: 760px) { .admin-navbar .system-search input[type="search"] { --field-pad-right: 16px; } }

/* Shared upload feedback and selected-file previews. */
.upload-previews { display:grid; grid-template-columns:1fr; gap:12px; margin-block:16px; }
.upload-preview { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px; border:1px solid #9b7624; border-radius:8px; }
.upload-thumbnail { width:80px; height:80px; flex:none; object-fit:cover; border-radius:8px; }
.upload-filename { flex:1; min-width:120px; overflow-wrap:anywhere; font-size:16px; line-height:1.5; text-transform:none; letter-spacing:normal; }
.upload-remove { min-height:44px; width:fit-content; padding:8px 16px; border:1px solid currentColor; border-radius:8px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.upload-error,[data-upload-error] { margin-block:16px; padding:16px; background:#fbeae6; color:#862c20; font-size:16px; line-height:1.5; }
.upload-feedback,[data-upload-feedback] { font-size:16px; line-height:1.5; }
.upload-progress,[data-upload-progress] { width:100%; height:16px; margin-block:16px; accent-color:var(--ui-forest); }
.upload-dropzone { display:grid; gap:8px; padding:20px; border:1px dashed #9b7624; border-radius:8px; background:rgba(155,118,36,.04); cursor:pointer; transition:background 160ms,border-color 160ms; }
.upload-dropzone.is-dragging { border-style:solid; background:rgba(155,118,36,.12); }
.upload-dropzone input[type="file"] { width:100%; cursor:pointer; }
.upload-order,.upload-remove { min-height:44px; padding:8px 12px; border:1px solid #9b7624; border-radius:8px; background:#fff; color:#1e293b; cursor:pointer; }
.upload-order:disabled { opacity:.35; cursor:not-allowed; }
.live-picker { position:relative; width:100%; }
.live-picker-input { width:100%; }
.live-picker-clear { position:absolute; z-index:2; top:4px; right:4px; width:40px; min-height:40px; border:0; border-radius:6px; background:transparent; color:#475569; font-size:24px; cursor:pointer; }
.live-picker-input { padding-right:48px !important; }
.live-picker-results { position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; max-height:320px; overflow:auto; padding:6px; border:1px solid #9b7624; border-radius:8px; background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.16); }
.live-picker-results button { display:block; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:6px; background:transparent; color:#1e293b; text-align:left; cursor:pointer; }
.live-picker-results button:hover,.live-picker-results button:focus-visible { background:#f3efe4; }
.live-picker-results p { margin:0; padding:12px; color:#475569; }