/* tokens/dogma-labs.css */
@import './base.css';

:root {
  /* --- Backgrounds (Heritage Wood) --- */
  --background:             #FAF7F2;
  --foreground:             #1a1a1a;
  --surface:                #F7F4EB;
  --surface-foreground:     #1a1a1a;

  /* --- Brand (Speedway Asphalt & Neon) --- */
  --primary:                #1a1a1a;    /* Asphalt */
  --primary-foreground:     #ff8200;    /* Neon */
  --accent:                 #2d4a3e;    /* Smoky Green */
  --accent-foreground:      #ffffff;

  /* --- UI States --- */
  --muted:                  #f3f4f6;
  --muted-foreground:       #6b7280;
  --border:                 rgba(26, 26, 26, 0.1);
  --neon:                   #ff8200;
  --neon-glow:              0 0 15px rgba(255, 130, 0, 0.5);

  /* --- Surface Styles (Glass) --- */
  --glass-bg:               rgba(255, 255, 255, 0.7);
  --glass-blur:             12px;
  --glass-border:           rgba(255, 255, 255, 0.4);

  /* --- Shape --- */
  --radius:                 12px;
  --radius-lg:              24px;
  --nav-style:              glass;

  /* --- Typography (Space Grotesk & Inter) --- */
  --font-display:           'Space Grotesk', system-ui, sans-serif;
  --font-body:              'Inter', system-ui, sans-serif;
  --font-weight-display:    700;
  --font-weight-body:       400;
  --font-stretch-hero:      98%;
  --letter-tight:           -0.04em;

  /* --- UI Accents --- */
  --badge-bg:               rgba(255, 130, 0, 0.1);
  --badge-border:           rgba(255, 130, 0, 0.3);
  
  /* --- Depth --- */
  --bento-shadow:           0 20px 40px rgba(0, 0, 0, 0.08);
  --hero-gradient:          linear-gradient(135deg, #FAF7F2 0%, #F0EBE0 100%);

  /* --- Animation (Cinematic / V2 Spec) --- */
  --anim-duration:          1.2s;
  --anim-ease:              cubic-bezier(0.2, 0.8, 0.2, 1);
  --anim-stagger:           0.1s;
  --btn-transition:         transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Global Refinements --- */
h1, h2, h3 { letter-spacing: var(--letter-tight); }
.italic-accent { font-style: italic; font-weight: 300; font-family: var(--font-display); }

/* --- Global Utilities (Native to this Client) --- */
.u-kinetic {
  background: linear-gradient(90deg, var(--neon), #ffd9a8, var(--neon));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kineticShift 8s ease-in-out infinite;
}

@keyframes kineticShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.u-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
}