/* ===== Design System v2 — Extends main.css for AAA redesign =====
   Load AFTER main.css. Depends on --accent, --bg, --border from main.css.
   Plan 1: Foundation — tokens, card frame, icon mask system. */

/* ===== Typography tokens ===== */
:root {
  --font-ui:     "Orbitron", "Rajdhani", ui-sans-serif, sans-serif;
  --font-body:   "Inter", "Segoe UI", system-ui, sans-serif;
  --font-number: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
}

/* ===== Theme extensions — chrome accent color per side ===== */
:root,
:root[data-side="dark"] {
  --chrome:      #8a9bb0;  /* cold steel — Dark Side inactive chrome */
  --chrome-dim:  #5a6878;
  --identity:    var(--accent);  /* alias — Sith red on dark side */
}

:root[data-side="light"] {
  --chrome:      #c8a84b;  /* warm gold — Light Side chrome */
  --chrome-dim:  #8a7230;
  --identity:    var(--accent);  /* alias — Rebellion orange on light side */
}

/* ===== Motion tokens ===== */
:root {
  --ease-enter:   cubic-bezier(0, 0, 0.2, 1);   /* ease-out: entering elements */
  --ease-exit:    cubic-bezier(0.4, 0, 1, 1);   /* ease-in:  exiting elements */
  --dur-micro:    140ms;  /* exit, snap feedback */
  --dur-fast:     200ms;  /* enter, expand, most transitions */
  --dur-med:      300ms;  /* combat flash, roll reveal */
  --dur-slow:     400ms;  /* fade out */
}

/* Kill all animation when reduced-motion is requested — no exceptions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-fast:  0ms;
    --dur-med:   0ms;
    --dur-slow:  0ms;
  }
}

/* ===== Card Frame — chamfered corners (Jedi Survivor style) ===== */
:root {
  --chamfer:         12px;
  --chamfer-sm:       6px;
  --circuit-opacity:  0.05;
}

.card-frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  clip-path: polygon(
    var(--chamfer) 0%,
    100% 0%,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0% 100%,
    0% var(--chamfer)
  );
}

/* Inner circuit-grid overlay — decorative holographic panel texture */
.card-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,var(--circuit-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,var(--circuit-opacity)) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
}

/* Card content must sit above the circuit grid */
.card-frame > * {
  position: relative;
  z-index: 1;
}

/* Active card: top-edge glow in identity color */
.card-frame.card-active {
  border-color: var(--accent);
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Sealed/locked card: desaturated + hatched overlay */
.card-frame.card-sealed {
  filter: grayscale(0.75) opacity(0.65);
  cursor: not-allowed;
}

.card-frame.card-sealed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--bad) 8%, transparent) 0px,
    color-mix(in srgb, var(--bad) 8%, transparent) 1px,
    transparent 1px,
    transparent 10px
  );
  pointer-events: none;
  z-index: 2;
}

/* Small chamfer variant */
.card-frame.card-sm {
  clip-path: polygon(
    var(--chamfer-sm) 0%,
    100% 0%,
    100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%,
    0% 100%,
    0% var(--chamfer-sm)
  );
}

/* ===== Silhouette Icon System — mask-image recoloring ===== */
/* Usage: <span class="sw-icon sw-icon-yoda icon-identity" style="--icon-size:32px"></span> */

.sw-icon {
  display: inline-block;
  width:  var(--icon-size, 24px);
  height: var(--icon-size, 24px);
  background-color: var(--text-muted);    /* default: muted steel */
  flex-shrink: 0;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background-color var(--dur-fast) var(--ease-enter);
}

/* Color modifiers */
.sw-icon.icon-active   { background-color: var(--accent); }
.sw-icon.icon-identity { background-color: var(--identity); }
.sw-icon.icon-chrome   { background-color: var(--chrome); }
.sw-icon.icon-alert    { background-color: var(--bad); }
.sw-icon.icon-muted    { background-color: var(--text-muted); }
.sw-icon.icon-text     { background-color: var(--text); }

/* Named icon shortcuts */
.sw-icon-jedi-order   { -webkit-mask-image: url("/static/icons/sw/jedi-order.png");    mask-image: url("/static/icons/sw/jedi-order.png"); }
.sw-icon-rebel        { -webkit-mask-image: url("/static/icons/sw/rebel-alliance.png"); mask-image: url("/static/icons/sw/rebel-alliance.png"); }
.sw-icon-empire       { -webkit-mask-image: url("/static/icons/sw/empire.png");         mask-image: url("/static/icons/sw/empire.png"); }
.sw-icon-c3po         { -webkit-mask-image: url("/static/icons/sw/c3po.png");           mask-image: url("/static/icons/sw/c3po.png"); }
.sw-icon-yoda         { -webkit-mask-image: url("/static/icons/sw/yoda.png");           mask-image: url("/static/icons/sw/yoda.png"); }
.sw-icon-boba-fett    { -webkit-mask-image: url("/static/icons/sw/boba-fett.png");      mask-image: url("/static/icons/sw/boba-fett.png"); }
.sw-icon-falcon       { -webkit-mask-image: url("/static/icons/sw/falcon.png");         mask-image: url("/static/icons/sw/falcon.png"); }
.sw-icon-falcon-alt   { -webkit-mask-image: url("/static/icons/sw/falcon-alt.png");     mask-image: url("/static/icons/sw/falcon-alt.png"); }
.sw-icon-blaster      { -webkit-mask-image: url("/static/icons/sw/blaster.png");        mask-image: url("/static/icons/sw/blaster.png"); }