/* Shared visual language. Accessibility and responsive rules load after this file. */
@media screen {
  :is(.front-body, .admin-body) {
    --ui-ink: #14263f;
    --ui-muted: #526174;
    --ui-accent: #b73508;
    --ui-accent-hover: #922a06;
    --ui-line: #dce3ec;
    --ui-surface: #fff;
    --ui-soft: #f5f7fb;
    --ui-shadow: 0 3px 14px rgb(20 38 63 / 5%);
    --ui-shadow-hover: 0 10px 26px rgb(20 38 63 / 10%);
    --bs-body-color: var(--ui-ink);
    --bs-border-color: var(--ui-line);
    color: var(--ui-ink);
    -webkit-font-smoothing: antialiased;
  }
  .front-body { --front-ink: var(--ui-ink); --front-muted: var(--ui-muted); --front-line: var(--ui-line); }
  .admin-body { --admin-ink: var(--ui-ink); --admin-muted: var(--ui-muted); --admin-line: var(--ui-line); background: var(--ui-soft); }
  :is(.front-body, .admin-body) :is(.front-page-heading, .admin-page-heading) {
    margin-bottom: clamp(20px, 3vw, 32px);
    gap: 16px;
  }
  .front-body .front-page-heading {
    background: linear-gradient(120deg, #fff7ef, #fff 75%);
    border: 1px solid #eadfd5;
    border-radius: 20px;
    padding: clamp(20px, 3vw, 36px);
  }
  :is(.front-body, .admin-body) :is(.front-page-heading, .admin-page-heading) h1 {
    font-weight: 750; color: var(--ui-ink); margin-bottom: 10px;
  }
  :is(.front-body, .admin-body) :is(.front-page-heading, .admin-page-heading) p {
    max-width: 68ch; margin-bottom: 0; color: var(--ui-muted); line-height: 1.8;
  }
  :is(.front-body, .admin-body) :is(.card, .reference-panel, .front-job-card, .story-card, .studio-product, .shop-product) {
    border-color: var(--ui-line);
    border-radius: 16px;
    box-shadow: var(--ui-shadow);
    transition: border-color 180ms ease, box-shadow 220ms ease;
  }
  .admin-body .reference-panel > header { padding: 16px; background: #fcfdff; }
  .admin-body .reference-panel h2 { font-size: 17px; font-weight: 700; line-height: 1.6; }
  .admin-body .reference-metric { box-shadow: var(--ui-shadow); gap: 16px; }
  .admin-body .metric-label { font-weight: 650; }
  .admin-body .reference-empty { font-size: 14px; line-height: 1.8; }
  .front-body .story-card-copy h2 { font-weight: 700; }
  .front-body :is(.story-card-copy p, .front-job-meta) { line-height: 1.85; }
  :is(.front-body, .admin-body) .btn {
    border-radius: 10px; font-weight: 600; line-height: 1.6;
    padding: 10px 16px;
  }
  :is(.front-body, .admin-body) .btn-primary {
    --bs-btn-bg: var(--ui-accent);
    --bs-btn-border-color: var(--ui-accent);
    --bs-btn-hover-bg: var(--ui-accent-hover);
    --bs-btn-hover-border-color: var(--ui-accent-hover);
    --bs-btn-active-bg: var(--ui-accent-hover);
    --bs-btn-active-border-color: var(--ui-accent-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    background-color: var(--ui-accent); border-color: var(--ui-accent); color: #fff;
  }
  .admin-body .btn-primary:hover { background-color: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
  :is(.front-body, .admin-body) :is(.form-control, .form-select) {
    border: 1px solid #b9c6d5; border-radius: 10px;
    background-color: var(--ui-surface); color: var(--ui-ink);
    padding: 10px 12px; line-height: 1.6;
  }
  :is(.front-body, .admin-body) :is(.form-control, .form-select):focus {
    border-color: #174e89; box-shadow: 0 0 0 3px rgb(23 78 137 / 15%);
  }
  :is(.front-body, .admin-body) :is(.form-control, .form-select):disabled {
    background-color: #eef2f6; color: #526174;
  }
  :is(.front-body, .admin-body) .form-control::placeholder { color: #617185; opacity: 1; }
  :is(.front-body, .admin-body) .form-label { font-weight: 600; margin-bottom: 8px; }
  :is(.front-body, .admin-body) :is(.form-control, .form-select).is-invalid { border-color: #ad2030; }
  :is(.front-body, .admin-body) :is(.form-control, .form-select).is-valid { border-color: #16705c; }
  :is(.front-body, .admin-body) .input-group > :is(.form-control, .form-select) { border-radius: 0; }
  :is(.front-body, .admin-body) .input-group > :first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
  :is(.front-body, .admin-body) .input-group > :last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
  :is(.front-body, .admin-body) :is(.customer-nav, .content-tabs, .account-order-filters) { gap: 8px; }
  :is(.front-body, .admin-body) :is(.alert, .front-empty, .admin-empty) { border-radius: 12px; line-height: 1.8; }
  @media (hover: hover) and (pointer: fine) {
    :is(.front-body, .admin-body) :is(.front-job-card, .story-card, .studio-product, .shop-product, .reference-metric):hover {
      border-color: #aabdd2; box-shadow: var(--ui-shadow-hover);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.front-body, .admin-body) :is(.card, .reference-panel, .front-job-card, .story-card, .studio-product, .shop-product) { transition: none; }
  }
}