/* =============================================================================
   Semper Admin Portal - Portable Token System v1.2
   Source: SEMPER-STYLE-GUIDE.md dated 2026-05-04
   Adopted into FITREP Evaluator PoC under Phase 1 styling pass.

   Light defaults are on :root. Dark overrides activate when the html or body
   element carries the .dark class.
   ============================================================================= */

:root {
  /* Brand palette */
  --color-usmc-scarlet:     #B82230;
  --color-usmc-scarlet-700: #971826;
  --color-usmc-scarlet-300: #D14150;
  --color-marine-blue:      #0F1F3D;
  --color-marine-blue-700:  #0A1424;
  --color-marine-blue-300:  #2A3D60;
  --color-marine-blue-100:  #6B9BD2;
  --color-parchment:        #F2E5BE;
  --color-parchment-700:    #D9C994;
  --color-parchment-300:    #FAF1D8;
  --color-brass:            #B89042;
  --color-brass-700:        #8E6E2E;
  --color-brass-300:        #D4AF67;

  /* Warm parchment-tinted neutral ramp for light mode */
  --color-neutral-50:  #F8F4E8;
  --color-neutral-100: #F2EBD4;
  --color-neutral-200: #E7DFC2;
  --color-neutral-300: #C9BD96;
  --color-neutral-400: #A89A72;
  --color-neutral-500: #8A7E63;
  --color-neutral-600: #5C5340;
  --color-neutral-700: #3A3328;
  --color-neutral-800: #26221A;
  --color-neutral-900: #181410;
  --color-neutral-950: #0F0C09;

  /* Cool navy ramp for dark mode reference */
  --color-ink-50:  #F2E5BE;
  --color-ink-100: #B5A988;
  --color-ink-200: #8A7F66;
  --color-ink-300: #34507A;
  --color-ink-400: #233A5C;
  --color-ink-500: #1F345C;
  --color-ink-600: #182A4D;
  --color-ink-700: #11203F;
  --color-ink-800: #0A1424;
  --color-ink-900: #060E1A;

  /* Role accents */
  --color-role-marine:    #B82230;
  --color-role-leader:    #B89042;
  --color-role-commander: #0F1F3D;
  --color-role-admin:     #2F8F5C;

  /* Status */
  --color-status-fresh: #2F8F5C;
  --color-status-aging: #C97D1F;
  --color-status-stale: #B83232;
  --color-status-info:  #2F5FA8;

  /* Semantic tokens, light defaults */
  --color-background:          #F8F4E8;
  --color-bg-elev:             #FFFCF4;
  --color-bg-sunken:           #EFE9D6;
  --color-foreground:          #1A1610;
  --color-card:                #FFFCF4;
  --color-popover:             #FFFCF4;
  --color-primary:             #B82230;
  --color-primary-foreground:  #FFFCF4;
  --color-secondary:           #0F1F3D;
  --color-secondary-foreground:#F2E5BE;
  --color-muted:               #F2EBD4;
  --color-muted-foreground:    #5C5340;
  --color-subtle-foreground:   #8A7E63;
  --color-accent:              #B89042;
  --color-accent-foreground:   #1A1610;
  --color-destructive:         #B83232;
  --color-border:              #DDD3B5;
  --color-border-strong:       #C9BD96;
  --color-ring:                #B82230;
  --color-surface:             #FFFCF4;
  --color-surface-2:           #F2EBD4;
  --color-surface-3:           #E7DFC2;

  /* Typography stack. Self-hosted fonts must be installed for full brand match.
     Fallbacks render the PoC at parity with system rendering until fonts ship. */
  --font-display: "Bebas Neue", "Oswald", system-ui, sans-serif;
  --font-body:    "Inter Variable", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono Variable", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.0625rem;  /* 17 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.375rem;   /* 22 */
  --text-3xl:  1.75rem;    /* 28 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.5rem;     /* 56 */

  /* Spacing scale, strict ladder */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-xs:     3px;
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-card:   8px;
  --radius-button: 6px;
  --radius-banner: 0px;
  --radius-chip:   9999px;
  --radius:        0.5rem;

  /* Shadows, light defaults */
  --shadow-sm:          0 1px 2px rgba(26,22,16,.05), 0 0 0 1px rgba(26,22,16,.04);
  --shadow-card:        0 1px 2px rgba(26,22,16,.05), 0 0 0 1px rgba(26,22,16,.04);
  --shadow-md:          0 2px 4px rgba(26,22,16,.06), 0 10px 28px rgba(26,22,16,.08);
  --shadow-card-strong: 0 2px 4px rgba(26,22,16,.06), 0 10px 28px rgba(26,22,16,.08);
  --shadow-lg:          0 18px 52px rgba(26,22,16,.20);

  /* Layout constants */
  --topbar-h: 56px;
  --tree-w:   272px;
  --toc-w:    232px;

  /* Motion */
  --motion-fast:    120ms;
  --motion-default: 180ms;
  --motion-slow:    240ms;
  --easing-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in:      cubic-bezier(0.7, 0, 0.84, 0);
}

/* Dark overrides activate on .dark on html or body */
.dark, html.dark, body.dark {
  --color-background:           #0A1424;
  --color-bg-elev:              #11203F;
  --color-bg-sunken:            #060E1A;
  --color-foreground:           #F2E5BE;
  --color-card:                 #11203F;
  --color-popover:              #11203F;
  --color-primary:              #D14150;
  --color-primary-foreground:   #060E1A;
  --color-secondary:            #2A3D60;
  --color-secondary-foreground: #F2E5BE;
  --color-muted:                #182A4D;
  --color-muted-foreground:     #B5A988;
  --color-subtle-foreground:    #8A7F66;
  --color-accent:               #D4AF67;
  --color-accent-foreground:    #060E1A;
  --color-border:               #233A5C;
  --color-border-strong:        #34507A;
  --color-surface:              #11203F;
  --color-surface-2:            #182A4D;
  --color-surface-3:            #1F345C;
  --color-role-commander:       #6B9BD2;

  /* Dark shadow overrides for deeper occlusion */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4),  0 0 0 1px rgba(242,229,190,.04);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4),  0 10px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 52px rgba(0,0,0,.55);
}

/* Base body application of foreground and background tokens */
html, body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Heading rules per the guide */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
h2, .h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* Selection and focus per the guide */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--color-brass);
  color: var(--color-neutral-950);
}

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

/* Premium polish helpers per Section 9 of the guide */

.gradient-accent {
  background: linear-gradient(95deg,
    var(--color-usmc-scarlet) 0%,
    var(--color-usmc-scarlet-300) 35%,
    var(--color-brass-300) 75%,
    var(--color-brass) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ambient-bloom { position: relative; isolation: isolate; }
.ambient-bloom::before {
  content: "";
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 70%; max-width: 720px; height: 320px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--color-usmc-scarlet) 10%, transparent) 0%,
    color-mix(in srgb, var(--color-marine-blue-300) 8%, transparent) 40%,
    transparent 75%);
  pointer-events: none;
  z-index: -1;
  filter: blur(20px);
  opacity: 0;
  transition: opacity var(--motion-slow) var(--easing-out);
}
.dark .ambient-bloom::before { opacity: 1; }

.chrome-floating {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-elev) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
}

/* Eyebrow text treatment */
.eyebrow {
  font: 700 11px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground);
}

/* Mono citation text treatment */
.mono-citation {
  font: 500 13px var(--font-mono);
  color: var(--color-subtle-foreground);
}