/* ═══════════════════════════════════════════════
   CLARIX — DESIGN SYSTEM
   Tokens, Typography, Reset, Utilities
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ─── TOKENS ─────────────────────────────────── */
:root {
  --accent:           #ff7043;
  --accent-hover:     #f4511e;
  --accent-dim:       #cc5200;
  --accent-glow:      rgba(255,112,67,0.22);
  --accent-glow-lg:   rgba(255,112,67,0.12);

  /* Dark surfaces */
  --bg-dark:          #000000;
  --bg-dark-1:        #0a0a0a;
  --bg-dark-2:        #111111;
  --bg-dark-3:        #1a1a1a;
  --bg-dark-card:     rgba(255,255,255,0.04);
  --bg-dark-hover:    rgba(255,255,255,0.07);
  --border-dark:      rgba(255,255,255,0.08);
  --border-accent:    rgba(255,112,67,0.3);

  /* Light surfaces (Write page) */
  --bg-light:         #f5f5f7;
  --bg-light-card:    #ffffff;
  --bg-light-hover:   #eeeeef;
  --border-light:     rgba(0,0,0,0.08);

  /* Text */
  --text-white:       #ffffff;
  --text-off-white:   #f0f0f0;
  --text-muted-dark:  #888888;
  --text-subtle-dark: #555555;
  --text-dark:        #111111;
  --text-muted-light: #666666;

  /* Fonts */
  --font-head:  'Syne', sans-serif;
  --font-body:  'DM Sans', sans-serif;

  /* Radii */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm:     0 2px 10px rgba(0,0,0,0.25);
  --shadow-md:     0 6px 30px rgba(0,0,0,0.35);
  --shadow-lg:     0 16px 60px rgba(0,0,0,0.5);
  --shadow-accent: 0 8px 30px rgba(255,112,67,0.3);
  --shadow-card:   0 4px 24px rgba(0,0,0,0.4);

  /* Transitions */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.15s;
  --t-mid:  0.25s;
  --t-slow: 0.4s;

  /* Z-index stack */
  --z-base:    1;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ─── RESET ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
a { text-decoration: none; color: inherit; }
input, textarea, select { font-family: inherit; outline: none; border: none; }
ul { list-style: none; }

/* ─── SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,112,67,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,112,67,0.6); }

/* ─── TYPOGRAPHY ──────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; }

.display-xl  { font-size: clamp(52px, 9vw, 96px); font-weight: 900; }
.display-lg  { font-size: clamp(38px, 6vw, 68px); font-weight: 800; }
.display-md  { font-size: clamp(28px, 4vw, 48px); font-weight: 700; }
.heading-lg  { font-size: clamp(22px, 3vw, 34px); font-weight: 700; }
.heading-md  { font-size: clamp(18px, 2.5vw, 26px); font-weight: 600; }
.body-lg     { font-size: 17px; font-weight: 400; line-height: 1.7; }
.body-md     { font-size: 15px; font-weight: 400; line-height: 1.65; }
.body-sm     { font-size: 13px; font-weight: 400; line-height: 1.6; }
.label       { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ─── COLORS — UTILITY ────────────────────────── */
.text-accent  { color: var(--accent); }
.text-white   { color: var(--text-white); }
.text-muted   { color: var(--text-muted-dark); }
.bg-dark      { background: var(--bg-dark); color: var(--text-white); }
.bg-light     { background: var(--bg-light); color: var(--text-dark); }

/* ─── LAYOUT UTILITIES ────────────────────────── */
.container    { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 24px; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-sm  { gap: 8px; }
.gap-md  { gap: 16px; }
.gap-lg  { gap: 24px; }
.gap-xl  { gap: 40px; }

/* ─── SECTION SPACING ─────────────────────────── */
.section     { padding: 80px 0; }
.section-sm  { padding: 48px 0; }
.section-lg  { padding: 120px 0; }
@media (max-width: 768px) {
  .section    { padding: 56px 0; }
  .section-lg { padding: 72px 0; }
}

/* ─── ✦ BADGE ─────────────────────────────────── */
.ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--r-full);
  background: rgba(255,112,67,0.1); border: 1px solid rgba(255,112,67,0.35);
  color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
}
.ai-badge .badge-star { font-size: 10px; }

/* ─── GRADIENT TEXT ───────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #ff7043 0%, #ff9a76 50%, #ffcc02 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── KEYFRAMES ───────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulsate {
  0%,100% { opacity: 1; } 50% { opacity: 0.4; }
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-40px) scale(1.05); }
  66%     { transform: translate(-20px,20px) scale(0.97); }
}
@keyframes marqueeFwd {
  from { transform: translateX(0); } to { transform: translateX(-50%); }
}
@keyframes marqueeRev {
  from { transform: translateX(-50%); } to { transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 20px var(--accent-glow); }
  50%     { box-shadow: 0 0 40px rgba(255,112,67,0.4); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounceIn {
  0%    { transform: scale(0.8); opacity: 0; }
  60%   { transform: scale(1.05); opacity: 1; }
  100%  { transform: scale(1); }
}

/* ─── ANIMATIONS ──────────────────────────────── */
.anim-fade-up  { animation: fadeUp var(--t-slow) var(--ease) both; }
.anim-fade-in  { animation: fadeIn var(--t-mid) var(--ease) both; }
.anim-delay-1  { animation-delay: 0.1s; }
.anim-delay-2  { animation-delay: 0.2s; }
.anim-delay-3  { animation-delay: 0.3s; }
.anim-delay-4  { animation-delay: 0.45s; }

/* ─── GLASS CARD ──────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
}
.glass-card-light {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ─── DIVIDER ─────────────────────────────────── */
.divider { height: 1px; background: var(--border-dark); margin: 0; }
.divider-light { height: 1px; background: var(--border-light); }

/* ─── HIDE/SHOW ───────────────────────────────── */
.hidden { display: none !important; }
.invisible { visibility: hidden; }
@media (max-width: 768px) { .desktop-only { display: none !important; } }
@media (min-width: 769px) { .mobile-only  { display: none !important; } }

/* ─── PAGE BODY THEMES ────────────────────────── */
body.theme-dark {
  background: var(--bg-dark);
  color: var(--text-white);
}
body.theme-light {
  background: var(--bg-light);
  color: var(--text-dark);
}