/* Norman Theme - Visual Variants */

/* Base root variables (Ink variant default) */
:root {
  --bg-primary: #131009;
  --bg-secondary: rgba(13, 11, 8, 0.92);
  --text-primary: #f2ead9;
  --text-secondary: rgba(242, 234, 217, 0.7);
  --text-tertiary: rgba(242, 234, 217, 0.5);
  --accent-primary: #c4a35a;
  --accent-secondary: rgba(196, 163, 90, 0.3);
  --accent-warm: #c4a96a;
  --accent-cool: #6ba3d4;
  --border-color: rgba(242, 234, 217, 0.1);
  --panel-backdrop: blur(30px);
}

/* Gilt Variant */
body.gilt-variant {
  --bg-primary: #1a1612;
  --bg-secondary: rgba(26, 22, 18, 0.92);
  --text-primary: #f8f0e3;
  --text-secondary: rgba(248, 240, 227, 0.7);
  --text-tertiary: rgba(248, 240, 227, 0.5);
  --accent-primary: #c9a84c;
  --accent-secondary: rgba(201, 168, 76, 0.3);
  --accent-warm: #d4b55e;
  --accent-cool: #7aa8d9;
  --border-color: rgba(248, 240, 227, 0.1);
}

body.gilt-variant .stage::after {
  background: linear-gradient(
    180deg,
    rgba(26, 22, 18, 0.3) 0%,
    rgba(26, 22, 18, 0.6) 50%,
    rgba(26, 22, 18, 0.8) 100%
  );
}

body.gilt-variant .flourish-bar {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.3) 50%,
    transparent 100%
  );
}

/* Page Variant */
body.page-variant {
  --bg-primary: #f8f3ea;
  --bg-secondary: rgba(248, 243, 234, 0.92);
  --text-primary: #3d352a;
  --text-secondary: rgba(61, 53, 42, 0.7);
  --text-tertiary: rgba(61, 53, 42, 0.5);
  --accent-primary: #b5614a;
  --accent-secondary: rgba(181, 97, 74, 0.3);
  --accent-warm: #c9745d;
  --accent-cool: #5a8fb8;
  --border-color: rgba(61, 53, 42, 0.1);
}

body.page-variant .stage::after {
  background: linear-gradient(
    180deg,
    rgba(248, 243, 234, 0.3) 0%,
    rgba(248, 243, 234, 0.6) 50%,
    rgba(248, 243, 234, 0.8) 100%
  );
}

body.page-variant .flourish-bar {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(181, 97, 74, 0.3) 50%,
    transparent 100%
  );
}

body.page-variant .nav,
body.page-variant .panel {
  border-color: rgba(61, 53, 42, 0.1);
}

/* Linen Variant */
body.linen-variant {
  --bg-primary: #eeecea;
  --bg-secondary: rgba(238, 236, 234, 0.92);
  --text-primary: #3c342a;
  --text-secondary: rgba(60, 52, 42, 0.7);
  --text-tertiary: rgba(60, 52, 42, 0.5);
  --accent-primary: #5c4a32;
  --accent-secondary: rgba(92, 74, 50, 0.3);
  --accent-warm: #6b5941;
  --accent-cool: #4a7ba8;
  --border-color: rgba(60, 52, 42, 0.1);
}

body.linen-variant .stage::after {
  background: linear-gradient(
    180deg,
    rgba(238, 236, 234, 0.3) 0%,
    rgba(238, 236, 234, 0.6) 50%,
    rgba(238, 236, 234, 0.8) 100%
  );
}

body.linen-variant .flourish-bar {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(92, 74, 50, 0.3) 50%,
    transparent 100%
  );
}

body.linen-variant .nav,
body.linen-variant .panel {
  border-color: rgba(60, 52, 42, 0.1);
}

/* Noir Variant */
body.noir-variant {
  --bg-primary: #0a0806;
  --bg-secondary: rgba(10, 8, 6, 0.92);
  --text-primary: #e8e0d3;
  --text-secondary: rgba(232, 224, 211, 0.7);
  --text-tertiary: rgba(232, 224, 211, 0.5);
  --accent-primary: #8eaec4;
  --accent-secondary: rgba(142, 174, 196, 0.3);
  --accent-warm: #9eb5c7;
  --accent-cool: #5a8fb8;
  --border-color: rgba(232, 224, 211, 0.1);
}

body.noir-variant .stage::after {
  background: linear-gradient(
    180deg,
    rgba(10, 8, 6, 0.3) 0%,
    rgba(10, 8, 6, 0.6) 50%,
    rgba(10, 8, 6, 0.8) 100%
  );
}

body.noir-variant .flourish-bar {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(142, 174, 196, 0.3) 50%,
    transparent 100%
  );
}

/* Apply variant colors to base elements */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.nav {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.nav-item {
  color: var(--text-secondary);
}

.nav-item:hover {
  color: var(--text-primary);
}

.a-eyebrow {
  color: var(--text-secondary);
}

.a-name {
  color: var(--text-primary);
}

.a-sub {
  color: var(--text-secondary);
}

.wm {
  color: var(--text-tertiary);
}

.flourish-bar {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-secondary) 50%,
    transparent 100%
  );
}

/* Stage filter classes for different variants */
body.gilt-variant .stage {
  filter: sepia(0.2) contrast(1.1);
}

body.page-variant .stage {
  filter: brightness(1.1) contrast(0.95);
}

body.linen-variant .stage {
  filter: brightness(1.05) sepia(0.1);
}

body.noir-variant .stage {
  filter: contrast(1.2) brightness(0.9);
}

/* Responsive adjustments for variants */
@media (max-width: 768px) {
  body.page-variant .nav,
  body.page-variant .panel,
  body.linen-variant .nav,
  body.linen-variant .panel {
    border-color: var(--border-color);
  }
}