/**
 * S3T Metal — design tokens (light / dark)
 * Base: brushed steel / chrome · Spark: logo orange (#F8820E) used sparingly
 */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Logo orange — accent spark only */
  --s3t-orange: #f8820e;
  --s3t-orange-bright: #ff9a2e;
  --s3t-orange-deep: #e06a00;
  --s3t-orange-glow: rgba(248, 130, 14, 0.28);
  --s3t-orange-muted: rgba(248, 130, 14, 0.1);

  /* Chrome / steel scale (from logo silver gradients) */
  --s3t-chrome-100: #e8ecf0;
  --s3t-chrome-200: #d4dce4;
  --s3t-chrome-300: #b8c4ce;
  --s3t-chrome-400: #9aa8b6;
  --s3t-chrome-500: #7d8c9a;
  --s3t-chrome-600: #626f7c;
  --s3t-chrome-700: #4a5560;
  --s3t-chrome-800: #363f48;

  --s3t-steel-50: #f0f2f5;
  --s3t-steel-100: #e2e6ea;
  --s3t-steel-200: #b8babd;
  --s3t-steel-300: #888888;
  --s3t-steel-400: #6c6e70;
  --s3t-steel-500: #505858;
  --s3t-steel-600: #47494a;
  --s3t-steel-700: #3d3d3d;
  --s3t-steel-800: #282828;
  --s3t-steel-900: #181818;

  --bg-page: #eceff2;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --text-primary: var(--s3t-steel-900);
  --text-secondary: var(--s3t-steel-500);
  --text-muted: var(--s3t-steel-400);

  --border: var(--s3t-chrome-100);
  --border-strong: var(--s3t-chrome-300);

  --link: var(--s3t-chrome-700);
  --link-hover: #5a6672;

  --accent: var(--s3t-chrome-500);
  --accent-hover: var(--s3t-chrome-400);
  --accent-pressed: var(--s3t-chrome-700);
  --accent-text: var(--s3t-steel-900);
  --accent-border: var(--s3t-chrome-600);
  --accent-gradient: linear-gradient(
    180deg,
    var(--s3t-chrome-200) 0%,
    var(--s3t-chrome-400) 48%,
    var(--s3t-chrome-500) 100%
  );
  --accent-gradient-hover: linear-gradient(
    180deg,
    var(--s3t-chrome-100) 0%,
    var(--s3t-chrome-300) 48%,
    var(--s3t-chrome-400) 100%
  );
  --accent-shadow: 0 2px 8px rgba(74, 85, 96, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --accent-glow: 0 0 18px var(--s3t-orange-glow);
  --focus-ring: rgba(248, 130, 14, 0.22);

  --header-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(24, 24, 24, 0.06);
  --card-shadow: 0 1px 3px rgba(24, 24, 24, 0.06), 0 8px 24px rgba(24, 24, 24, 0.04);
  --hero-gradient: linear-gradient(
    145deg,
    #eceff2 0%,
    #d8dee4 38%,
    #e8ecf0 72%,
    #f0f2f5 100%
  );
  --metal-shine: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
}

[data-theme="dark"] {
  color-scheme: dark;

  --s3t-orange-glow: rgba(233, 136, 29, 0.32);

  --bg-page: #0f1114;
  --bg-surface: #1a1e23;
  --bg-elevated: #242a31;
  --text-primary: #e8ecf0;
  --text-secondary: var(--s3t-chrome-300);
  --text-muted: var(--s3t-chrome-500);

  --border: #2e353d;
  --border-strong: var(--s3t-chrome-700);

  --link: var(--s3t-chrome-300);
  --link-hover: var(--s3t-chrome-200);

  --accent: var(--s3t-chrome-500);
  --accent-hover: var(--s3t-chrome-400);
  --accent-pressed: var(--s3t-chrome-600);
  --accent-text: #f0f2f5;
  --accent-border: var(--s3t-chrome-600);
  --accent-gradient: linear-gradient(
    180deg,
    var(--s3t-chrome-600) 0%,
    var(--s3t-chrome-700) 50%,
    var(--s3t-chrome-800) 100%
  );
  --accent-gradient-hover: linear-gradient(
    180deg,
    var(--s3t-chrome-500) 0%,
    var(--s3t-chrome-600) 50%,
    var(--s3t-chrome-700) 100%
  );
  --accent-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --accent-glow: 0 0 22px var(--s3t-orange-glow), 0 0 40px rgba(184, 196, 206, 0.08);
  --focus-ring: rgba(248, 130, 14, 0.3);

  --header-shadow: 0 1px 0 var(--border);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --hero-gradient: linear-gradient(
    145deg,
    #0f1114 0%,
    #1a2028 42%,
    #141820 100%
  );
}

/* Title accent — chrome bar + orange spark (like logo "t" underline) */
.s3t-title-accent::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 5px;
  margin-top: 0.75rem;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--s3t-chrome-500) 0%,
    var(--s3t-chrome-400) 55%,
    var(--s3t-orange) 55%,
    var(--s3t-orange) 100%
  );
  box-shadow: 0 2px 10px var(--s3t-orange-glow);
}

[data-theme="dark"] .s3t-title-accent::after {
  background: linear-gradient(
    to bottom,
    var(--s3t-chrome-600) 0%,
    var(--s3t-chrome-500) 55%,
    var(--s3t-orange) 55%,
    var(--s3t-orange-bright) 100%
  );
}