﻿/* =========================================================
   AINEXO — Logo Color System (ratio locked)
   60% Warm White / Soft Ivory surfaces (light theme)
   25% Graphite Black (dark surfaces)
   10% Luxury Gold #C89B3C (accent ONLY)
   5%  Deep Crimson #9F2D2D (CTAs ONLY)
   Layout / spacing / typography / animations unchanged.
   ========================================================= */
:root {
  --brand-gold: #C89B3C;
  --brand-gold-dark: #C89B3C;
  --brand-gold-hi: #C89B3C;
  --brand-black: #242424;
  --brand-gray: #1b1b1b;
  --brand-white: #ffffff;
  --brand-muted: #666666;
  --brand-crimson: #9F2D2D;
  --brand-crimson-dark: #7A2323;
  --brand-graphite: #242424;
  --brand-warm-white: #FAF8F5;
  --brand-soft-ivory: #F4EFE8;

  /* Status — desaturated, not brand accents */
  --success: #3d8b5c;
  --warning: #9F2D2D;
  --error: #9F2D2D;

  --link: var(--brand-gold);
  --link-hover: var(--brand-crimson);
  --focus-ring: rgba(159, 45, 45, 0.35);

  /* CTAs = crimson only (not gold) */
  --cta: #9F2D2D;
  --cta-hover: #7A2323;
  --on-primary: #ffffff;
  --on-cta: #ffffff;

  --surface: var(--bg-2);
  --surface-elevated: var(--bg-3);
  --divider: var(--border);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: var(--border-strong);
  --skeleton: rgba(255, 255, 255, 0.08);
  --tooltip-bg: #242424;
  --alert-success-bg: rgba(61, 139, 92, 0.14);
  --alert-warning-bg: rgba(159, 45, 45, 0.12);
  --alert-error-bg: rgba(159, 45, 45, 0.14);

  /* Dark default (existing 3D site) — graphite dominates */
  --bg: #242424;
  --bg-2: #1b1b1b;
  --bg-3: #2c2c2c;
  --card: rgba(255, 255, 255, 0.05);
  --card-strong: rgba(255, 255, 255, 0.07);
  /* Borders: soft ivory, NOT gold wash */
  --border: rgba(232, 226, 217, 0.14);
  --border-strong: rgba(200, 155, 60, 0.28);

  /* Accents */
  --primary: #C89B3C;
  --secondary: #9F2D2D;
  --accent: #C89B3C;
  --royal: #1b1b1b;
  --deep-blue: #242424;

  --text: #ffffff;
  --muted: #cfcfcf;
  --faint: rgba(207, 207, 207, 0.72);

  /* Gradients — no yellow dominance; graphite + crimson + thin gold */
  --grad-main: linear-gradient(135deg, #9F2D2D 0%, #7A2323 100%);
  --grad-cool: linear-gradient(135deg, #c89b3c 0%, #9f2d2d 100%);
  --grad-warm: linear-gradient(135deg, #9F2D2D 0%, #C89B3C 100%);
  --grad-text: linear-gradient(120deg, #ffffff 0%, #C89B3C 100%);
  --grad-gold-accent: linear-gradient(135deg, #C89B3C, #C89B3C);

  --glow-primary: 0 0 20px -12px rgba(159, 45, 45, 0.35);
  --glow-secondary: 0 0 18px -12px rgba(36, 36, 36, 0.4);
  --glow-accent: 0 0 16px -12px rgba(200, 155, 60, 0.22);
  --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.85);

  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --maxw: 1200px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* Light surfaces — Warm White / Soft Ivory (logo breathing space) */
[data-theme="light"] {
  --bg: #FAF8F5;
  --bg-2: #F4EFE8;
  --bg-3: #ffffff;
  --card: #ffffff;
  --card-strong: #ffffff;
  --border: #E8E2D9;
  --border-strong: rgba(200, 155, 60, 0.35);
  --text: #1F1F1F;
  --muted: #525252;
  --faint: rgba(102, 102, 102, 0.85);
  --input-bg: #ffffff;
  --skeleton: rgba(36, 36, 36, 0.08);
  --tooltip-bg: #242424;
  --on-primary: #ffffff;
  --shadow-card: 0 20px 48px -24px rgba(36, 36, 36, 0.32);
  --glow-primary: 0 0 18px -12px rgba(159, 45, 45, 0.25);
  --glow-accent: 0 0 14px -12px rgba(200, 155, 60, 0.18);
  --glow-card-hover: 0 0 0 1px rgba(200, 155, 60, 0.22);
  color-scheme: light;
}
[data-theme="light"] .grid-overlay {
  background-image:
    linear-gradient(rgba(36, 36, 36, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 36, 36, 0.05) 1px, transparent 1px);
}
[data-theme="light"] .bg-fx {
  background:
    radial-gradient(55% 45% at 12% 10%, rgba(36, 36, 36, 0.04), transparent 60%),
    radial-gradient(50% 40% at 88% 16%, rgba(159, 45, 45, 0.05), transparent 55%),
    radial-gradient(45% 40% at 70% 88%, rgba(200, 155, 60, 0.05), transparent 55%),
    var(--bg);
}
