/* Demetra design tokens
 *
 * Phase 1 Stream D (ADR 0017): primitives now come from
 * `@olympus/design-tokens`. This file is the Demetra-local layer that:
 *
 *   1. Imports the workspace package's compiled CSS variables.
 *   2. Aliases the legacy `--bg`, `--ink`, etc. tokens to the new
 *      `--olympus-*` names so the ~5,000 lines of CSS under `src/css/*`
 *      keep working unchanged. (A blanket s/--bg/--olympus-color-bg-base/g
 *      across the codebase is feasible but out of scope for Stream D —
 *      Stream H polishes the visual layer and is the natural place for
 *      the rename.)
 *   3. Adds Demetra-specific layout dimensions that aren't part of the
 *      cross-pillar token set.
 *
 * Tokens upstream: derived from `knowledge/design/OLYMPUS_DESIGN_SYSTEM.md` §7
 * via `packages/design-tokens/src/tokens/`.
 */

/* The workspace's compiled CSS vars are vendored into this directory by
 * `build.ts` (vendorData phase) so the production deployment resolves
 * the @import via plain relative path. Local dev (`server.py`) and
 * Vite's dev mode also see the vendored copy. */
@import url('olympus-tokens.css');

/* `@olympus/spatial-core/popup` ships its CSS as a sibling file. The
 * popup-transparency fix from spec §4 lives in that file (opaque
 * background via --olympus-color-bg-base with a #ffffff fallback). */
@import url('olympus-popup.css');

:root {
  /* -----------------------------------------------------------------
   * Legacy aliases.
   *
   * Every name on the left is referenced by Demetra's existing CSS
   * (`shell.css`, `components.css`, `map.css`, `print.css`). Each
   * resolves to a workspace token on the right. Deleting an alias is
   * safe only when grep -r '--<name>' projects/demetra/src/css returns
   * nothing.
   * ----------------------------------------------------------------- */

  /* Colour — primary palette */
  --navy:        var(--olympus-color-navy-base);
  --navy-deep:   var(--olympus-color-navy-deep);
  --teal:        var(--olympus-color-teal-base);
  --teal-deep:   var(--olympus-color-teal-deep);
  --gold:        var(--olympus-color-gold-base);
  --gold-deep:   var(--olympus-color-gold-deep);
  --coral:       var(--olympus-color-coral-base);
  --sage:        var(--olympus-color-sage-base);
  --charcoal:    var(--olympus-color-charcoal-base);
  --sand:        var(--olympus-color-sand-base);
  --ink:         var(--olympus-color-fg-base);
  /* WCAG AA: 6.0:1 vs --bg-soft, 7.6:1 vs --bg. The workspace muted token
     is the primitive; Demetra's historical override was a darker shade
     for AA compliance — keep it inline here as an explicit derivation. */
  --muted:       #4b5563;
  --bg-soft:     var(--olympus-color-bg-soft);
  --bg:          var(--olympus-color-bg-base);

  /* Functional */
  --ok:          var(--olympus-color-ok-base);
  --warn:        var(--olympus-color-warn-base);
  --error:       var(--olympus-color-error-base);
  --info:        var(--olympus-color-info-base);
  --oracle-dark: var(--olympus-color-oracle-dark);

  /* Accent — primary action / "active" surface.
     --accent's #4a6cf7 fails WCAG 2.2 AA against white text (4.39:1 < 4.5:1)
     when used as a fill behind body-size text. --accent-deep is the
     surgical AA-safe substitute for those filled-on-text combos.
     These are Demetra-specific extensions to the workspace palette
     (the design-tokens package's "accent" semantic is navy + teal). */
  --accent:      #4a6cf7;
  --accent-hover: #3955d2;
  --accent-deep: #3046b8;

  /* District (locked, colour-blind safe) — bridge to workspace tokens. */
  --district-1:  var(--olympus-color-district-lefkosia);
  --district-2:  var(--olympus-color-district-pafos);
  --district-3:  var(--olympus-color-district-ammochostos);
  --district-4:  var(--olympus-color-district-larnaca);
  --district-5:  var(--olympus-color-district-lemesos);

  /* Typography */
  --font-sans: var(--olympus-font-family-sans);
  --font-mono: var(--olympus-font-family-mono);

  --fs-xs:    var(--olympus-font-size-xs);
  --fs-sm:    var(--olympus-font-size-sm);
  --fs-base:  var(--olympus-font-size-base);
  --fs-md:    var(--olympus-font-size-md);
  --fs-lg:    var(--olympus-font-size-lg);
  --fs-xl:    var(--olympus-font-size-xl);
  --fs-2xl:   var(--olympus-font-size-2xl);
  --fs-3xl:   var(--olympus-font-size-3xl);

  --lh-tight: var(--olympus-line-height-tight);
  --lh-base:  var(--olympus-line-height-base);
  --lh-loose: var(--olympus-line-height-loose);

  /* Spacing — workspace package uses 4-pt scale aligned with Demetra's. */
  --space-0:  var(--olympus-space-0);
  --space-1:  var(--olympus-space-1);
  --space-2:  var(--olympus-space-2);
  --space-3:  var(--olympus-space-3);
  --space-4:  var(--olympus-space-4);
  --space-5:  24px; /* legacy 24px step — workspace uses 20px for 5; keep Demetra's */
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;

  /* Radii / shadows / borders */
  --radius-sm: 3px;
  --radius-md: var(--olympus-radius-md, 6px);
  --radius-lg: var(--olympus-radius-lg, 10px);

  --shadow-sm: var(--olympus-elevation-sm, 0 1px 2px rgba(15,23,42,0.06));
  --shadow-md: var(--olympus-shadow-md, var(--olympus-elevation-md, 0 4px 12px rgba(15,23,42,0.08)));
  --shadow-lg: var(--olympus-elevation-lg, 0 12px 32px rgba(15,23,42,0.12));

  --border-thin:   1px solid var(--olympus-color-border-thin);
  --border-medium: 1px solid var(--olympus-color-border-medium);
  --border-strong: 1px solid var(--olympus-color-border-strong);

  /* Motion */
  --dur-instant: var(--olympus-duration-instant);
  --dur-fast:    var(--olympus-duration-fast);
  --dur-base:    var(--olympus-duration-base);
  --dur-slow:    var(--olympus-duration-slow);
  --ease-out:    var(--olympus-easing-out);
  --ease-in-out: var(--olympus-easing-in-out);

  /* -----------------------------------------------------------------
   * Demetra-only extensions
   *
   * Layout dimensions are pillar-specific; the workspace doesn't (and
   * shouldn't) own them. Same for density modes.
   * ----------------------------------------------------------------- */

  /* Layout dimensions (Demetra-specific) */
  --topbar-h:    56px;
  --footer-h:    32px;
  --sidebar-w:   280px;
  --sidebar-w-collapsed: 48px;
  --drawer-w:    320px;
  --modal-max-w: 960px;

  /* Density modes (default comfortable) */
  --row-h:       36px;
  --cell-pad-x:  16px;
  --cell-pad-y:  12px;
  --table-fs:    var(--fs-base);
}

[data-density="compact"] {
  --row-h:      28px;
  --cell-pad-x: 10px;
  --cell-pad-y: 6px;
  --table-fs:   var(--fs-sm);
}

/* Body baseline */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
}

/* Below-1280 notice */
#below-1280 {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  align-items: center; justify-content: center;
  font-size: var(--fs-md);
  text-align: center;
  padding: var(--space-6);
  z-index: 9999;
}
@media (max-width: 1279px) {
  #below-1280 { display: flex !important; }
  #root       { display: none; }
}

/* Focus-visible (mandatory per §11) */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}