/* ============================================================================
   927 Development Design System — colors_and_type.css
   No em-dashes. Use commas, colons, parentheses, or line breaks.
   ============================================================================ */

/* ---- Fonts (Google Fonts CDN) ---------------------------------------------
   Display: Syncopate (uppercase editorial protagonist)
   Body:    Space Mono (monospace technical voice)
   Sans:    Inter (fallback / utility sans)
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================================
   1. BASE TOKENS
   ============================================================================ */
:root {
  /* ---- Canvas / Surface / Border ---- */
  --color-base: #050505;          /* matte black canvas */
  --color-surface: #121214;       /* elevated graphite panel */
  --color-border: #2a2b2f;        /* smoked chrome hairline */
  --color-panel-bg: rgba(20, 20, 20, 0.80);
  --color-panel-border: rgba(200, 204, 210, 0.14);
  --color-card-bg: rgba(255, 255, 255, 0.03);
  --color-card-border: rgba(200, 204, 210, 0.18);

  /* ---- Text / Ink ---- */
  --color-ink: #edeff2;           /* smoked chrome primary text */
  --color-ink-muted: #a7abb1;     /* secondary text */
  --color-ink-dim: rgba(255, 255, 255, 0.35);

  /* ---- Primary: Smoked chrome ---- */
  --color-accent: #c8ccd2;
  --color-accent-glow: #edeff2;
  --color-accent-subtle: rgba(200, 204, 210, 0.10);
  --color-accent-strong: rgba(200, 204, 210, 0.38);

  /* ---- Secondary: Dark red (used sparingly) ---- */
  --color-accent-warm: #c8302f;
  --color-accent-warm-glow: #9b1c1c;

  /* ---- Per-zone semantic accents (from constants.js) ---- */
  --color-scripts: #c8ccd2;
  --color-assets: #9b1c1c;
  --color-server-builds: #edeff2;
  --color-management: #c8302f;
  --color-database: #818891;
  --color-maintain: #a7abb1;
  --color-build: #c8ccd2;
  --color-lead: #c8302f;
  --color-tebex: #c8ccd2;
  --color-discord: #c8302f;

  /* ============================================================================
     2. TYPE SYSTEM (base)
     ============================================================================ */
  --font-display: "Syncopate", system-ui, sans-serif;
  --font-body:    "Space Mono", ui-monospace, "Courier New", monospace;
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;

  /* ---- Type scale (raw values) ---- */
  --fs-display-xl: clamp(3rem, 10vw, 12rem);   /* H1 hero */
  --fs-display-lg: clamp(2rem, 6vw, 6rem);     /* H2 */
  --fs-display-md: clamp(1.5rem, 3.5vw, 3rem); /* H3 */
  --fs-display-sm: 0.875rem;                   /* eyebrow-display */
  --fs-heading:    1rem;
  --fs-body:       clamp(0.8rem, 1.2vw, 1rem);
  --fs-body-sm:    0.7rem;                     /* nav/HUD */
  --fs-label:      0.75rem;
  --fs-micro:      10px;

  --lh-display: 0.9;
  --lh-tight:   1.1;
  --lh-body:    1.65;
  --lh-loose:   1.8;

  --tracking-tight: -0.04em;
  --tracking-snug:  -0.02em;
  --tracking-wide:  0.3em;
  --tracking-wider: 0.4em;

  /* ============================================================================
     3. SPACING
     ============================================================================ */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-xxl: 96px;

  --pad-section-x: clamp(2.5rem, 6vw, 6rem);

  /* ============================================================================
     4. RADIUS
     ============================================================================ */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ============================================================================
     5. ELEVATION / SHADOWS (glow halos, no offset drop-shadows)
     ============================================================================ */
  --shadow-1: 0 0 0 1px var(--color-border);                                          /* hairline */
  --shadow-glow-border: 0 0 0 1px rgba(200,204,210,0.28), 0 0 20px rgba(200,204,210,0.10);
  --shadow-glow-text:   0 0 40px rgba(237,239,242,0.35), 0 0 80px rgba(200,204,210,0.18);
  --shadow-glow-warm:   0 0 24px rgba(200,48,47,0.35);
  --shadow-card:        0 8px 32px rgba(0,0,0,0.20),
                        inset 0 1px 0 rgba(255,255,255,0.08),
                        inset 0 -1px 0 rgba(255,255,255,0.03);

  /* ============================================================================
     6. MOTION
     ============================================================================ */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.2s;
  --dur-med:    0.4s;
  --dur-slow:   0.8s;
  --dur-rotate: 4s;       /* card-border-rotate */
}

/* ============================================================================
   7. SEMANTIC ELEMENT STYLES
   ============================================================================ */

html, body {
  background: var(--color-base);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

/* ---- Display headings (Syncopate, uppercase, tight) ------------------------ */
.display-xl,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.display-lg,
h2.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-lg);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.display-md,
h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ---- Inter headings (utility, not the protagonist) ------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

/* ---- Body (Space Mono) ----------------------------------------------------- */
.body,
p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-muted);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ---- Labels / Eyebrows / HUD ---------------------------------------------- */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  line-height: 1;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-warm);
  line-height: 1;
}

/* ---- Brand mark (Nav) ----------------------------------------------------- */
.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* ---- Code -----------------------------------------------------------------*/
code, pre {
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--color-accent);
  background: var(--color-surface);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
}

/* ============================================================================
   8. UTILITY: GRAIN OVERLAY
   ============================================================================ */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

/* ============================================================================
   9. KEYFRAMES (rotating glow, gradient sweep, scroll cue)
   ============================================================================ */
@property --card-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes card-border-rotate { to { --card-glow-angle: 360deg; } }
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes scroll-cue {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50%      { transform: translateY(10px); opacity: 0.3; }
}