/* Darn Good Ship — shared brand layer for ops-portal.
   Link it AFTER the fonts and the tokens it builds on, in this order:
     <link rel="stylesheet" href="{{ url_for('static', filename='brand/fonts.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='brand/tokens.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='brand/brand.css') }}">
   templates/shell.html does, for every page that extends it. This file used to
   @import the other two, which the browser can only discover once this one has
   arrived — a second round of requests before first paint, on URLs that carry
   no version stamp (lib/assets.py) — so the links are the page's job now.
   It bridges the legacy --teal/--mint/--ink/--gray names to the Rev A system
   and ships the shared component + typography defaults every page uses. See
   static/brand/BRAND.md. */

/* ---- legacy bridge -------------------------------------------------------
   Older templates reference --teal/--mint/etc. Map them onto the Rev A tokens
   so a template that drops its own :root block inherits brand-correct values.
   NOTE the split the brand mandates: teal 500 is a FILL; teal TEXT is 700. */
:root {
  --teal: var(--dgs-teal-500);          /* fills, borders, accents */
  --teal-text: var(--dgs-teal-700);     /* teal that carries type */
  --teal-light: var(--dgs-teal-400);
  --teal-dark: var(--dgs-teal-600);
  --mint: var(--dgs-teal-100);
  --coral: var(--dgs-coral-400);
  --coral-cta: var(--dgs-coral-500);
  --ink: var(--dgs-text-primary);
  --gray: var(--dgs-border-default);
  --white: var(--dgs-bg-surface);

  --page: var(--dgs-bg-page);
  --surface: var(--dgs-bg-surface);
  --muted: var(--dgs-text-muted);
  --secondary: var(--dgs-text-secondary);
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  font-family: var(--dgs-font-body);
  color: var(--dgs-text-primary);
  background: var(--dgs-bg-page);
  line-height: var(--dgs-leading-body);
}

/* Type roles from BRAND.md §5. Use the classes; don't hand-roll sizes. */
.dgs-title {
  font-family: var(--dgs-font-title);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: var(--dgs-leading-tight);
  color: var(--dgs-text-primary);
}
.dgs-section {
  font-family: var(--dgs-font-section);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dgs-teal-800);
  font-size: var(--dgs-size-sectionHeader);
}
h1, h2, h3, h4 { font-family: var(--dgs-font-heading); color: var(--dgs-text-primary); }
a { color: var(--dgs-text-brand); }

/* The shared topbar product name -> brand display font, everywhere at once.
   !important so it wins over the per-page inline .product { font-family:'Open Sans' }. */
.topbar .brand-text .product { font-family: var(--dgs-font-title) !important; letter-spacing: .5px; }

/* ---- focus: themed, never removed (BRAND.md §12) ------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dgs-focus-ring);
  outline-offset: 2px;
}

/* ---- shared components (brand-correct defaults) -------------------------- */
.card {
  background: var(--dgs-bg-surface);
  border: 1px solid var(--dgs-border-subtle);
  border-radius: var(--dgs-radius-md);
  padding: var(--dgs-space-6);
}
.btn-submit, .btn-primary {
  font-family: var(--dgs-font-caption);
  font-weight: 700;
  color: var(--dgs-text-on-brand);          /* ink on teal — never white */
  background: var(--dgs-bg-brand);
  border: 1px solid var(--dgs-border-brand);
  border-radius: var(--dgs-radius-md);
  padding: 10px 18px;
  min-height: var(--dgs-touch-target);
  cursor: pointer;
  transition: background var(--dgs-duration-quick) var(--dgs-ease-standard);
}
.btn-submit:hover, .btn-primary:hover { background: var(--dgs-brand-hover); }
.btn-submit:active, .btn-primary:active { background: var(--dgs-brand-pressed); }

/* Coral CTA — the ONE ask per screen (BRAND.md §2). Ink type, not white. */
.btn-accent {
  font-family: var(--dgs-font-caption);
  font-weight: 700;
  color: var(--dgs-text-primary);
  background: var(--dgs-coral-400);
  border: 1px solid var(--dgs-coral-500);
  border-radius: var(--dgs-radius-md);
  padding: 10px 18px;
  min-height: var(--dgs-touch-target);
  cursor: pointer;
}
.btn-accent:hover { background: var(--dgs-accent-hover); }

/* Tags/badges — 2px radius per BRAND.md §8. */
.badge {
  display: inline-block;
  font-family: var(--dgs-font-caption);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dgs-teal-800);
  background: var(--dgs-teal-100);
  border: 1px solid var(--dgs-teal-300);
  border-radius: var(--dgs-radius-sm);
  padding: 2px 8px;
}
.badge-accent {
  color: var(--dgs-text-primary);
  background: var(--dgs-coral-100);
  border-color: var(--dgs-coral-300);
}

/* Status chips read in greyscale too — color + word (BRAND.md §12). */
.chip-success { color: var(--dgs-success-700); background: var(--dgs-success-100); }
.chip-error   { color: var(--dgs-error-700);   background: var(--dgs-error-100); }
.chip-info    { color: var(--dgs-info-500);     background: var(--dgs-info-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; transition-duration: 1ms !important;
  }
}