/* ==========================================================================
   VRDevAI — Brand Design Tokens
   Source of truth: VRDevAI Brand Identity Sheet (2026-08-16)
   Do not invent colours. Every value below comes from the identity sheet.
   ========================================================================== */

:root {
  /* --- Core palette (exact values from the identity sheet) --- */
  --deep-navy:      #07152F;
  --tech-blue:      #087CFF;
  --cyber-cyan:     #21D9ED;
  --ai-violet:      #7A35FF;
  --signal-magenta: #C32CFF;
  --slate-gray:     #64748B;

  /* --- Derived neutrals --- */
  --white:      #FFFFFF;
  --off-white:  #F7F9FC;
  --line:       #E3E9F2;
  --line-soft:  #EEF2F8;
  --navy-80:    rgba(7, 21, 47, 0.80);
  --navy-60:    rgba(7, 21, 47, 0.60);

  /* --- Semantic roles (light surface — the primary brand surface) --- */
  --bg:          var(--white);
  --bg-alt:      var(--off-white);
  --bg-invert:   var(--deep-navy);
  --text:        var(--deep-navy);
  --text-muted:  var(--slate-gray);
  --text-invert: var(--white);
  --accent:      var(--tech-blue);
  --border:      var(--line);

  /* --- Brand gradients --- */
  /* The signature VR mark sweep: cyan -> blue -> violet -> magenta */
  --grad-brand:  linear-gradient(135deg, var(--cyber-cyan) 0%, var(--tech-blue) 38%, var(--ai-violet) 72%, var(--signal-magenta) 100%);
  --grad-accent: linear-gradient(135deg, var(--tech-blue) 0%, var(--ai-violet) 100%);
  --grad-text:   linear-gradient(96deg, var(--tech-blue) 0%, var(--ai-violet) 55%, var(--signal-magenta) 100%);
  --grad-deep:   linear-gradient(160deg, #07152F 0%, #0B1E42 45%, #101C4D 100%);

  /* --- Typography (identity sheet specifies Inter) --- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type scale */
  --fs-display: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
  --fs-h2:      clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-body:    clamp(0.98rem, 0.94rem + 0.16vw, 1.05rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.78rem;

  /* --- Spacing / radius / elevation --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 21, 47, 0.06), 0 2px 8px rgba(7, 21, 47, 0.04);
  --shadow-md: 0 4px 12px rgba(7, 21, 47, 0.07), 0 12px 32px rgba(7, 21, 47, 0.06);
  --shadow-lg: 0 12px 28px rgba(7, 21, 47, 0.10), 0 32px 64px rgba(7, 21, 47, 0.08);
  --shadow-glow: 0 12px 40px rgba(8, 124, 255, 0.28);

  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Brand utility classes
   -------------------------------------------------------------------------- */

.brand-gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tech-blue);
}

/* The four-dot rhythm from the identity sheet: CONSULT • DESIGN • BUILD • DEPLOY */
.dot-cyan    { color: var(--cyber-cyan); }
.dot-blue    { color: var(--tech-blue); }
.dot-violet  { color: var(--ai-violet); }
.dot-magenta { color: var(--signal-magenta); }