/* =========================================================
   Caspian Corel — design tokens
   Dark-first studio palette with a full light counterpart.
   ========================================================= */

@font-face { font-display: swap; font-family: "Vazirmatn"; font-style: normal; font-weight: 400; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Vazirmatn"; font-style: normal; font-weight: 500; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Vazirmatn"; font-style: normal; font-weight: 600; src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Vazirmatn"; font-style: normal; font-weight: 700 900; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); }

:root {
  /* ---- Neutrals (dark is the default authored state) ---- */
  --cc-bg:            #0a0d12;
  --cc-bg-deep:       #06080c;
  --cc-surface:       #10151d;
  --cc-surface-2:     #151b25;
  --cc-surface-3:     #1b232f;
  --cc-surface-glass: rgba(21, 27, 37, 0.72);
  --cc-border:        #212a36;
  --cc-border-soft:   #1a212b;
  --cc-border-strong: #303b4a;

  --cc-text:   #e9eef5;
  --cc-text-2: #9aa6b6;
  --cc-text-3: #66717f;
  --cc-text-inv: #06080c;

  /* ---- Accent (mint) ---- */
  --cc-accent:        #2ee6a8;
  --cc-accent-strong: #12c78c;
  --cc-accent-soft:   rgba(46, 230, 168, 0.12);
  --cc-accent-line:   rgba(46, 230, 168, 0.32);
  --cc-accent-glow:   rgba(46, 230, 168, 0.28);
  --cc-accent-ink:    #032018;

  /* ---- Support hues ---- */
  --cc-violet: #8f7dff;
  --cc-sky:    #4bc6ff;
  --cc-amber:  #ffb547;
  --cc-rose:   #ff6b8a;
  --cc-lime:   #b6e34a;
  --cc-cyan:   #37d6d6;
  --cc-slate:  #8794a6;
  --cc-emerald:#2ee6a8;

  --cc-success: #2ee6a8;
  --cc-warning: #ffb547;
  --cc-danger:  #ff6b8a;
  --cc-info:    #4bc6ff;

  /* ---- Elevation ---- */
  --cc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cc-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --cc-shadow:    0 14px 40px rgba(0, 0, 0, 0.45);
  --cc-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --cc-ring:      0 0 0 1px var(--cc-border);
  --cc-ring-accent: 0 0 0 1px var(--cc-accent-line), 0 0 32px -8px var(--cc-accent-glow);

  /* ---- Geometry ---- */
  --cc-r-xs: 8px;
  --cc-r-sm: 10px;
  --cc-r:    14px;
  --cc-r-lg: 20px;
  --cc-r-xl: 28px;
  --cc-r-full: 999px;

  --cc-container: 1440px;
  --cc-gutter: clamp(16px, 3vw, 40px);
  --cc-header-h: 72px;

  /* ---- Motion ---- */
  --cc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cc-fast: 140ms var(--cc-ease);
  --cc-mid:  240ms var(--cc-ease);
  --cc-slow: 420ms var(--cc-ease);

  /* ---- Ambient light used behind hero / cards ---- */
  --cc-aura-1: radial-gradient(60% 90% at 12% 0%, rgba(46, 230, 168, 0.14), transparent 70%);
  --cc-aura-2: radial-gradient(50% 80% at 92% 6%, rgba(143, 125, 255, 0.14), transparent 70%);

  --cc-grid-line: rgba(255, 255, 255, 0.035);
  --cc-overlay: rgba(4, 6, 10, 0.72);
  --cc-scrim: linear-gradient(to top, rgba(6, 8, 12, 0.88), rgba(6, 8, 12, 0) 60%);

  color-scheme: dark;
}

/* ---------- Light mode ---------- */
:root[data-theme="light"] {
  --cc-bg:            #f2f5f9;
  --cc-bg-deep:       #e8edf3;
  --cc-surface:       #ffffff;
  --cc-surface-2:     #f7f9fc;
  --cc-surface-3:     #eef2f7;
  --cc-surface-glass: rgba(255, 255, 255, 0.82);
  --cc-border:        #e1e7ef;
  --cc-border-soft:   #eaeff5;
  --cc-border-strong: #cbd5e1;

  --cc-text:   #0d141c;
  --cc-text-2: #55616f;
  --cc-text-3: #8593a3;
  --cc-text-inv: #ffffff;

  --cc-accent:        #00a97b;
  --cc-accent-strong: #008d67;
  --cc-accent-soft:   rgba(0, 169, 123, 0.10);
  --cc-accent-line:   rgba(0, 169, 123, 0.30);
  --cc-accent-glow:   rgba(0, 169, 123, 0.22);
  --cc-accent-ink:    #ffffff;

  --cc-violet: #6c5ce7;
  --cc-sky:    #0d8ecf;
  --cc-amber:  #d98407;
  --cc-rose:   #e4436b;
  --cc-lime:   #6f9c13;
  --cc-cyan:   #0e9c9c;
  --cc-slate:  #64748b;
  --cc-emerald:#00a97b;

  --cc-success: #00a97b;
  --cc-warning: #d98407;
  --cc-danger:  #e4436b;
  --cc-info:    #0d8ecf;

  --cc-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --cc-shadow-sm: 0 4px 14px rgba(16, 24, 40, 0.07);
  --cc-shadow:    0 14px 40px rgba(16, 24, 40, 0.10);
  --cc-shadow-lg: 0 30px 70px rgba(16, 24, 40, 0.14);
  --cc-ring-accent: 0 0 0 1px var(--cc-accent-line), 0 0 28px -12px var(--cc-accent-glow);

  --cc-aura-1: radial-gradient(60% 90% at 12% 0%, rgba(0, 169, 123, 0.10), transparent 70%);
  --cc-aura-2: radial-gradient(50% 80% at 92% 6%, rgba(108, 92, 231, 0.10), transparent 70%);

  --cc-grid-line: rgba(13, 20, 28, 0.045);
  --cc-overlay: rgba(15, 23, 33, 0.5);
  --cc-scrim: linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 60%);

  color-scheme: light;
}

/* ---------- Accent variants ---------- */
:root[data-accent="violet"] {
  --cc-accent: #8f7dff; --cc-accent-strong: #6f5cf0;
  --cc-accent-soft: rgba(143, 125, 255, 0.14);
  --cc-accent-line: rgba(143, 125, 255, 0.34);
  --cc-accent-glow: rgba(143, 125, 255, 0.30);
  --cc-accent-ink: #0d0722;
}
:root[data-accent="amber"] {
  --cc-accent: #ffb547; --cc-accent-strong: #e59512;
  --cc-accent-soft: rgba(255, 181, 71, 0.14);
  --cc-accent-line: rgba(255, 181, 71, 0.34);
  --cc-accent-glow: rgba(255, 181, 71, 0.30);
  --cc-accent-ink: #241603;
}
:root[data-accent="sky"] {
  --cc-accent: #4bc6ff; --cc-accent-strong: #1ba3e6;
  --cc-accent-soft: rgba(75, 198, 255, 0.14);
  --cc-accent-line: rgba(75, 198, 255, 0.34);
  --cc-accent-glow: rgba(75, 198, 255, 0.30);
  --cc-accent-ink: #04212e;
}

/* ---------- Format tone map ---------- */
:root {
  --cc-tone-emerald: var(--cc-emerald);
  --cc-tone-sky:     var(--cc-sky);
  --cc-tone-violet:  var(--cc-violet);
  --cc-tone-amber:   var(--cc-amber);
  --cc-tone-rose:    var(--cc-rose);
  --cc-tone-cyan:    var(--cc-cyan);
  --cc-tone-lime:    var(--cc-lime);
  --cc-tone-slate:   var(--cc-slate);
}

@media (prefers-reduced-motion: reduce) {
  :root { --cc-fast: 1ms; --cc-mid: 1ms; --cc-slow: 1ms; }
}