/* ==========================================================================
   EDISONMASTERS BRAND SYSTEM
   Version: 1.0.0
   Purpose:
   Shared horizontal visual language for EdisonMasters web properties.

   Architecture:
   1. Foundation tokens
   2. Theme + semantic tokens
   3. Base elements
   4. Layout primitives
   5. Component primitives
   6. Utilities
   7. Page profiles
   8. Local adaptation contract

   Vertical page rule:
   Consume and override --em-local-* tokens before rewriting shared components.
   ========================================================================== */

/* 01. FOUNDATION TOKENS */
:root {
  color-scheme: dark light;

  /* Brand foundations */
  --em-obsidian: #050505;
  --em-charcoal: #181818;
  --em-charcoal-raised: #222426;
  --em-ivory: #E8E1D1;
  --em-paper: #F4F0E7;
  --em-stone: #777063;

  /* Institutional Chambray */
  --em-chambray-100: #A4C8E1;
  --em-chambray-200: #9EB4D3;
  --em-chambray-700: #475877;
  --em-chambray-800: #405580;

  /* Operational accents */
  --em-emerald: #2F8068;
  --em-emerald-deep: #246B57;
  --em-brass: #B08A3C;

  /* Reserved destructive colors */
  --em-red: #A85757;
  --em-red-strong: #8F4141;

  /* Typography */
  --em-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --em-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --em-text-xs: 0.75rem;
  --em-text-sm: 0.875rem;
  --em-text-md: 1rem;
  --em-text-lg: 1.125rem;
  --em-text-xl: 1.375rem;
  --em-text-2xl: clamp(1.65rem, 2.2vw, 2.4rem);
  --em-text-display: clamp(2.6rem, 7vw, 7rem);

  --em-leading-tight: 1.05;
  --em-leading-body: 1.55;

  /* Spacing */
  --em-space-1: 0.25rem;
  --em-space-2: 0.5rem;
  --em-space-3: 0.75rem;
  --em-space-4: 1rem;
  --em-space-5: 1.25rem;
  --em-space-6: 1.5rem;
  --em-space-8: 2rem;
  --em-space-10: 2.5rem;
  --em-space-12: 3rem;
  --em-space-16: 4rem;
  --em-space-20: 5rem;
  --em-space-24: 6rem;

  /* Shape */
  --em-radius-xs: 0.5rem;
  --em-radius-sm: 0.75rem;
  --em-radius-md: 1.125rem;
  --em-radius-pill: 999px;

  /* Layout */
  --em-shell-max: 92rem;
  --em-reading-max: 72ch;
  --em-control-height: 2.75rem;
  --em-touch-min: 2.75rem;

  /* Motion */
  --em-ease: cubic-bezier(.2, .7, .2, 1);
  --em-speed-fast: 120ms;
  --em-speed-normal: 180ms;

  /* Local adaptation defaults */
  --em-local-accent: var(--em-chambray-700);
  --em-local-accent-strong: var(--em-chambray-200);
  --em-local-surface: var(--em-surface);
  --em-local-density: 1;
  --em-local-reading-width: var(--em-reading-max);
  --em-local-control-height: var(--em-control-height);
  --em-local-data-density: 1;
}

/* 02. THEME + SEMANTIC TOKENS */
html,
html[data-theme="dark"] {
  --em-bg: var(--em-obsidian);
  --em-surface: var(--em-charcoal);
  --em-surface-raised: var(--em-charcoal-raised);
  --em-text: var(--em-ivory);
  --em-text-muted: #A49D90;

  --em-info: var(--em-chambray-700);
  --em-info-strong: var(--em-chambray-200);
  --em-success: var(--em-emerald);
  --em-warning: var(--em-brass);
  --em-danger: var(--em-red);
  --em-danger-strong: var(--em-red-strong);

  --em-border: rgba(232, 225, 209, 0.13);
  --em-border-strong: rgba(164, 200, 225, 0.34);
  --em-focus: var(--em-chambray-100);

  --em-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.12);
  --em-shadow-md: 0 20px 60px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] {
  --em-bg: var(--em-ivory);
  --em-surface: var(--em-paper);
  --em-surface-raised: #ECE5D8;
  --em-text: var(--em-charcoal);
  --em-text-muted: #635F58;

  --em-info: var(--em-chambray-100);
  --em-info-strong: var(--em-chambray-700);
  --em-success: var(--em-emerald-deep);
  --em-warning: var(--em-brass);
  --em-danger: var(--em-red-strong);
  --em-danger-strong: #713333;

  --em-border: rgba(24, 24, 24, 0.12);
  --em-border-strong: rgba(64, 85, 128, 0.32);
  --em-focus: var(--em-chambray-800);

  --em-shadow-sm: 0 10px 30px rgba(72, 65, 54, 0.08);
  --em-shadow-md: 0 20px 60px rgba(72, 65, 54, 0.12);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --em-bg: var(--em-ivory);
    --em-surface: var(--em-paper);
    --em-surface-raised: #ECE5D8;
    --em-text: var(--em-charcoal);
    --em-text-muted: #635F58;
    --em-info: var(--em-chambray-100);
    --em-info-strong: var(--em-chambray-700);
    --em-success: var(--em-emerald-deep);
    --em-warning: var(--em-brass);
    --em-danger: var(--em-red-strong);
    --em-border: rgba(24, 24, 24, 0.12);
    --em-border-strong: rgba(64, 85, 128, 0.32);
    --em-focus: var(--em-chambray-800);
    --em-shadow-sm: 0 10px 30px rgba(72, 65, 54, 0.08);
    --em-shadow-md: 0 20px 60px rgba(72, 65, 54, 0.12);
  }
}

/* 03. RESET + BASE ELEMENTS */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--em-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--em-font-sans);
  font-size: var(--em-text-md);
  line-height: var(--em-leading-body);
  color: var(--em-text);
  background:
    radial-gradient(
      circle at 12% -8%,
      color-mix(in srgb, var(--em-info) 20%, transparent),
      transparent 34rem
    ),
    radial-gradient(
      circle at 90% 0%,
      color-mix(in srgb, var(--em-success) 9%, transparent),
      transparent 28rem
    ),
    var(--em-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

p {
  margin-block: 0 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0;
  line-height: var(--em-leading-tight);
  letter-spacing: -0.025em;
}

hr {
  border: 0;
  border-top: 1px solid var(--em-border);
}

::selection {
  background: color-mix(in srgb, var(--em-info) 58%, transparent);
  color: var(--em-text);
}

:focus-visible {
  outline: 3px solid var(--em-focus);
  outline-offset: 3px;
}

/* 04. LAYOUT PRIMITIVES */
.em-shell {
  width: min(calc(100% - 2rem), var(--em-shell-max));
  margin-inline: auto;
}

.em-main {
  padding-block: var(--em-space-8) var(--em-space-16);
}

.em-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--em-space-4) * var(--em-local-density));
}

.em-stack--sm {
  gap: calc(var(--em-space-2) * var(--em-local-density));
}

.em-stack--lg {
  gap: calc(var(--em-space-8) * var(--em-local-density));
}

.em-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--em-space-3) * var(--em-local-density));
}

.em-cluster--between {
  justify-content: space-between;
}

.em-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--em-space-4) * var(--em-local-density));
}

.em-reading {
  width: min(100%, var(--em-local-reading-width));
}

.em-flow > * + * {
  margin-top: calc(var(--em-space-4) * var(--em-local-density));
}

/* 05. SITE / PAGE STRUCTURE */
.em-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--em-border);
  background: color-mix(in srgb, var(--em-bg) 82%, transparent);
  backdrop-filter: blur(18px);
}

.em-site-header__inner {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: var(--em-space-4);
}

.em-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--em-space-3);
  text-decoration: none;
}

.em-brand__mark {
  width: 2.375rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--em-border-strong);
  border-radius: 50%;
  font-weight: 800;
  font-size: var(--em-text-xs);
  letter-spacing: 0.05em;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--em-info) 72%, transparent),
      color-mix(in srgb, var(--em-success) 38%, transparent)
    );
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--em-bg) 58%, transparent);
}

.em-brand__name {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.em-brand__descriptor {
  display: block;
  margin-top: 0.2rem;
  color: var(--em-text-muted);
  font-size: var(--em-text-xs);
  letter-spacing: 0.04em;
}

.em-page-header {
  padding-block: clamp(3rem, 7vw, 6.5rem) var(--em-space-8);
}

.em-page-title {
  max-width: 15ch;
  font-size: var(--em-text-display);
  line-height: 0.93;
  letter-spacing: -0.055em;
}

.em-page-lede {
  max-width: 64ch;
  margin-top: var(--em-space-6);
  color: var(--em-text-muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.em-eyebrow,
.em-label {
  color: var(--em-info-strong);
  font-size: var(--em-text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.em-section-title {
  font-size: var(--em-text-2xl);
}

.em-muted {
  color: var(--em-text-muted);
}

/* 06. SURFACE PRIMITIVES */
.em-panel,
.em-card {
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-md);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--em-local-surface) 98%, transparent),
      color-mix(in srgb, var(--em-local-accent) 5%, var(--em-surface-raised))
    );
}

.em-panel {
  padding: calc(var(--em-space-5) * var(--em-local-density));
}

.em-card {
  padding: calc(var(--em-space-6) * var(--em-local-density));
  box-shadow: var(--em-shadow-sm);
}

.em-card--interactive {
  transition:
    transform var(--em-speed-normal) var(--em-ease),
    border-color var(--em-speed-normal) var(--em-ease),
    background var(--em-speed-normal) var(--em-ease);
}

.em-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--em-border-strong);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--em-local-surface) 96%, transparent),
      color-mix(in srgb, var(--em-local-accent) 10%, var(--em-surface-raised))
    );
}

.em-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--em-space-2);
  padding: var(--em-space-3);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-sm);
  background: color-mix(in srgb, var(--em-surface) 92%, transparent);
}

.em-divider {
  height: 1px;
  width: 100%;
  background: var(--em-border);
}

/* 07. BUTTONS */
.em-btn {
  min-height: var(--em-local-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--em-space-2);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-pill);
  padding-inline: var(--em-space-4);
  color: var(--em-text);
  background: var(--em-surface);
  font-weight: 800;
  font-size: var(--em-text-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--em-speed-fast) var(--em-ease),
    border-color var(--em-speed-fast) var(--em-ease),
    background var(--em-speed-fast) var(--em-ease);
}

.em-btn:hover {
  border-color: var(--em-border-strong);
}

.em-btn:active {
  transform: translateY(1px);
}

.em-btn:disabled,
.em-btn[aria-disabled="true"] {
  opacity: 0.52;
  cursor: not-allowed;
}

.em-btn--primary {
  border-color: color-mix(in srgb, var(--em-local-accent-strong) 40%, var(--em-border));
  background: color-mix(in srgb, var(--em-local-accent) 32%, var(--em-surface));
}

.em-btn--secondary {
  background: var(--em-surface-raised);
}

.em-btn--quiet {
  border-color: transparent;
  background: transparent;
}

.em-btn--success {
  border-color: color-mix(in srgb, var(--em-success) 45%, var(--em-border));
  background: color-mix(in srgb, var(--em-success) 20%, var(--em-surface));
}

.em-btn--danger {
  border-color: color-mix(in srgb, var(--em-danger) 50%, var(--em-border));
  background: color-mix(in srgb, var(--em-danger) 18%, var(--em-surface));
}

/* 08. FORMS */
.em-field {
  display: grid;
  gap: var(--em-space-2);
}

.em-field__label {
  font-size: var(--em-text-sm);
  font-weight: 800;
}

.em-field__help {
  color: var(--em-text-muted);
  font-size: var(--em-text-xs);
}

.em-input,
.em-select,
.em-textarea {
  width: 100%;
  min-height: var(--em-local-control-height);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-sm);
  padding-inline: var(--em-space-4);
  color: var(--em-text);
  background: color-mix(in srgb, var(--em-surface) 94%, transparent);
}

.em-textarea {
  min-height: 8rem;
  padding-block: var(--em-space-3);
  resize: vertical;
}

.em-input::placeholder,
.em-textarea::placeholder {
  color: var(--em-text-muted);
}

.em-input:focus,
.em-select:focus,
.em-textarea:focus {
  border-color: var(--em-border-strong);
}

/* 09. STATUS / BADGES / KPI */
.em-badge,
.em-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.75rem;
  width: fit-content;
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-pill);
  padding-inline: 0.6rem;
  color: var(--em-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.em-status::before {
  content: "";
  width: 0.44rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--em-warning);
}

.em-status--info::before {
  background: var(--em-info-strong);
}

.em-status--success::before {
  background: var(--em-success);
}

.em-status--warning::before {
  background: var(--em-warning);
}

.em-status--danger::before {
  background: var(--em-danger);
}

.em-kpi {
  min-width: 0;
  padding: calc(var(--em-space-4) * var(--em-local-density));
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-sm);
  background: color-mix(in srgb, var(--em-bg) 22%, transparent);
}

.em-kpi__value {
  display: block;
  color: var(--em-info-strong);
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.em-kpi__label {
  display: block;
  margin-top: var(--em-space-2);
  color: var(--em-text-muted);
  font-size: var(--em-text-xs);
}

/* 10. TABLES / LEDGER DATA */
.em-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-sm);
}

.em-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.em-table th,
.em-table td {
  padding:
    calc(var(--em-space-3) / var(--em-local-data-density))
    calc(var(--em-space-4) / var(--em-local-data-density));
  border-bottom: 1px solid var(--em-border);
  text-align: left;
  vertical-align: top;
}

.em-table th {
  color: var(--em-text-muted);
  font-size: var(--em-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.em-table tbody tr:last-child td {
  border-bottom: 0;
}

.em-table tbody tr:hover {
  background: color-mix(in srgb, var(--em-info) 7%, transparent);
}

/* 11. PAGE PROFILES */

/* Public / marketing */
.em-page--public {
  --em-local-density: 1.08;
  --em-local-reading-width: 72ch;
}

/* General tool / operator console */
.em-page--tool {
  --em-local-density: 0.95;
  --em-local-control-height: 2.75rem;
}

/* Ledger / finance */
.em-page--ledger {
  --em-local-density: 0.86;
  --em-local-data-density: 1.14;
  --em-local-accent: var(--em-brass);
  --em-local-accent-strong: var(--em-chambray-200);
}

/* Training / timer */
.em-page--training {
  --em-local-density: 1;
  --em-local-control-height: 3.25rem;
  --em-local-accent: var(--em-emerald);
  --em-local-accent-strong: var(--em-chambray-200);
}

/* Reading / creative */
.em-page--reading {
  --em-local-density: 1.08;
  --em-local-reading-width: 68ch;
  --em-local-accent: var(--em-chambray-200);
}

/* 12. LOCAL PAGE ADAPTATION CONTRACT
   Add page-specific classes AFTER this stylesheet.

   Example:
   .em-page--delivery {
     --em-local-accent: var(--em-chambray-700);
     --em-local-control-height: 3rem;
   }

   .em-page--reserve {
     --em-local-accent: var(--em-brass);
     --em-local-data-density: 1.2;
   }

   .em-page--hiit {
     --em-local-accent: var(--em-emerald);
     --em-local-control-height: 3.5rem;
   }

   Then scope specialized layout rules:
   .em-page--reserve .reserve-obligation-grid { ... }
*/

/* 13. UTILITIES */
.em-text-center { text-align: center; }
.em-text-right { text-align: right; }
.em-nowrap { white-space: nowrap; }
.em-grow { flex: 1 1 auto; }
.em-shrink-0 { flex-shrink: 0; }
.em-hidden { display: none !important; }

.em-mono {
  font-family: var(--em-font-mono);
  font-variant-numeric: tabular-nums;
}

.em-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 14. RESPONSIVE DEFAULTS */
@media (max-width: 64rem) {
  .em-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 42.5rem) {
  .em-shell {
    width: min(calc(100% - 1.25rem), var(--em-shell-max));
  }

  .em-site-header__inner {
    min-height: 3.875rem;
  }

  .em-brand__descriptor {
    display: none;
  }

  .em-grid {
    grid-template-columns: 1fr;
  }

  .em-page-header {
    padding-block: 3rem var(--em-space-6);
  }

  .em-page-title {
    font-size: clamp(2.5rem, 16vw, 4.5rem);
  }

  .em-toolbar {
    align-items: stretch;
  }

  .em-toolbar > * {
    max-width: 100%;
  }
}

/* 15. ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .em-panel,
  .em-card,
  .em-toolbar,
  .em-btn,
  .em-input,
  .em-select,
  .em-textarea,
  .em-table-wrap {
    border: 1px solid CanvasText;
  }

  .em-status::before {
    forced-color-adjust: none;
  }
}