/* ============================================================
   Cryptex — Design Tokens (single source of truth)
   Loaded before style.css / admin.css / login.css on every page.
   Edit colors, spacing, radius, type and motion HERE — nowhere else.
   ============================================================ */

/* ---- Self-hosted webfonts (no runtime CDN calls — privacy-first) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  /* ---- Brand & interactive accent (indigo → violet, from the logo) ---- */
  --accent: #6366f1;              /* interactive accent: links, icons, progress, focus */
  --accent-hover: #4f46e5;
  --accent-strong: #4f46e5;       /* solid button background (passes AA on white text) */
  --accent-strong-hover: #4338ca;
  --accent-soft: rgba(99, 102, 241, 0.10);   /* tinted backgrounds */
  --accent-border: rgba(99, 102, 241, 0.45);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.18);

  /* Aliases kept for selectors that already reference these names */
  --primary: var(--accent);
  --accent-primary: var(--accent);
  --accent-primary-rgb: 99 102 241;

  /* ---- Semantic colors ---- */
  --success: #10b981;             /* accent / text-on-surface */
  --success-strong: #059669;      /* solid button background */
  --success-strong-hover: #047857;
  --danger: #ef4444;
  --danger-strong: #dc2626;
  --danger-strong-hover: #b91c1c;
  --warning: #f59e0b;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo,
               Consolas, 'Liberation Mono', monospace;

  /* Fluid type scale */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.375rem;    /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: clamp(2rem, 1.4rem + 2.6vw, 3rem);   /* hero headline */

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Radius scale ---- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.06), 0 1px 3px rgba(16, 18, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 18, 24, 0.08), 0 2px 6px rgba(16, 18, 24, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 18, 24, 0.12), 0 4px 12px rgba(16, 18, 24, 0.08);
  --shadow-card: var(--shadow-md);

  /* ---- Motion ---- */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* theme color/bg fades */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Neutrals (LIGHT is the default; overridden per data-theme below) ---- */
  --bg-primary: #fbfbfd;
  --bg-secondary: #f3f4f7;
  --bg-tertiary: #ffffff;
  --text-primary: #16181d;
  --text-secondary: #5b616e;
  --text-tertiary: #8b909c;
  --border-primary: #e7e8ee;
  --border-secondary: #eceef3;
  --border-hover: #cdd0d9;        /* NEUTRAL hover border (accent lives in --accent) */
  --input-bg: #ffffff;
  --card-bg: #ffffff;
  --card-border: #e7e8ee;
  --card-border-hover: #d4d7e0;
  --header-border: #eceef3;
  --file-btn-bg: #ffffff;
  --file-btn-bg-hover: #f0f1f5;

  /* Ambient page backdrop — one whisper-subtle indigo wash, top-center */
  --bg-app: radial-gradient(1200px 600px at 50% -200px, rgba(99, 102, 241, 0.07), transparent 70%), var(--bg-primary);
  --surface-translucent: rgba(255, 255, 255, 0.72);
}

/* ---- Dark theme (deep, cool near-black for a vault-like feel) ---- */
[data-theme="dark"] {
  --bg-primary: #0d0e12;
  --bg-secondary: #16181f;
  --bg-tertiary: #1c1f27;
  --text-primary: #e7e9ee;
  --text-secondary: #969ba6;
  --text-tertiary: #6b717c;
  --border-primary: #262a33;
  --border-secondary: #1e212a;
  --border-hover: #383d49;
  --input-bg: #101218;
  --card-bg: #15171e;
  --card-border: #262a33;
  --card-border-hover: #383d49;
  --header-border: #20242d;
  --file-btn-bg: #15171e;
  --file-btn-bg-hover: #1c1f27;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);

  --bg-app: radial-gradient(1100px 560px at 50% -180px, rgba(99, 102, 241, 0.14), transparent 68%), var(--bg-primary);
  --surface-translucent: rgba(21, 23, 30, 0.72);
}

/* ---- Light theme (explicit) ---- */
[data-theme="light"] {
  --bg-primary: #fbfbfd;
  --bg-secondary: #f3f4f7;
  --bg-tertiary: #ffffff;
  --text-primary: #16181d;
  --text-secondary: #5b616e;
  --text-tertiary: #8b909c;
  --border-primary: #e7e8ee;
  --border-secondary: #eceef3;
  --border-hover: #cdd0d9;
  --input-bg: #ffffff;
  --card-bg: #ffffff;
  --card-border: #e7e8ee;
  --card-border-hover: #d4d7e0;
  --header-border: #eceef3;
  --file-btn-bg: #ffffff;
  --file-btn-bg-hover: #f0f1f5;

  --surface-translucent: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   Accessibility: respect the OS "reduce motion" preference.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   Realign Bootstrap's color utilities to our token palette so
   markup using .text-muted / .bg-success / .text-danger stays
   on-brand instead of falling back to Bootstrap's defaults.
   ============================================================ */
.text-muted { color: var(--text-tertiary) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.progress-bar.bg-success { background-color: var(--success) !important; }