/* =========================================================================
   CC-autoposter - Design Tokens
   ========================================================================= */

/* Self-hosted fonts. No Google Fonts CDN - works offline + no CSP issues. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/geist-light.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/geist-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/geist-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/geist-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-medium.woff2') format('woff2');
}

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --bg-deep:        #020203;     /* page top */
  --bg-base:        #050506;     /* page bottom */
  --bg-elev-1:      #0a0a0c;     /* card / panel */
  --bg-elev-2:      #101013;     /* hover */
  --bg-elev-3:      #16161a;     /* active / pressed */
  --bg-overlay:     rgba(5,5,6,0.72);

  /* --- Borders / hairlines ---------------------------------------------- */
  --line:           rgba(237,237,239,0.06);
  --line-strong:    rgba(237,237,239,0.10);
  --line-focus:     rgba(94,106,210,0.55);

  /* --- Foreground ------------------------------------------------------- */
  --fg:             #EDEDEF;     /* warm white */
  --fg-dim:         #9A9AA3;
  --fg-mute:        #5C5C66;
  --fg-disabled:    #36363D;

  /* --- Accent (indigo-violet, like Linear) ------------------------------ */
  --accent:         #5E6AD2;
  --accent-hi:      #7B86E3;
  --accent-lo:      #404AA1;
  --accent-glow:    rgba(94,106,210,0.40);
  --accent-soft:    rgba(94,106,210,0.10);

  /* --- Status ----------------------------------------------------------- */
  --ok:             #4ADE80;
  --warn:           #F5B454;
  --err:            #F26E6E;
  --info:           #6EC0F2;

  /* --- Platform brand markers (2px borders + dots ONLY) ----------------- */
  --p-tiktok:       #25F4EE;
  --p-instagram:    #E1306C;
  --p-youtube:      #FF0033;
  --p-facebook:     #1877F2;
  --p-threads:      #EDEDEF;
  --p-linkedin:     #0A66C2;
  --p-x:            #EDEDEF;
  --p-reddit:       #FF4500;
  --p-telegram:     #26A5E4;
  --p-bluesky:      #1185FE;
  --p-mastodon:     #6364FF;
  --p-pinterest:    #BD081C;
  --p-vk:           #0077FF;
  --p-ok:           #EE8208;
  --p-substack:     #FF6719;
  --p-rutube:       #C800FE;
  --p-dzen:         #F8C826;

  /* --- Type ------------------------------------------------------------- */
  --font-ui:        'Geist', 'Inter', -apple-system, BlinkMacSystemFont, ui-sans-serif, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:        12px;        /* metadata only, sparingly */
  --text-sm:        13px;
  --text-base:      14px;
  --text-md:        15px;
  --text-lg:        17px;
  --text-xl:        22px;
  --text-2xl:       28px;
  --text-3xl:       40px;
  --text-4xl:       64px;

  --tracking-tight: -0.02em;
  --tracking-mono:  -0.01em;

  /* --- Radius ----------------------------------------------------------- */
  --r-xs:           4px;
  --r-sm:           6px;
  --r-md:           8px;
  --r-lg:           12px;
  --r-xl:           16px;
  --r-2xl:          22px;
  --r-full:         9999px;

  /* --- Spacing ---------------------------------------------------------- */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           20px;
  --sp-6:           24px;
  --sp-8:           32px;
  --sp-10:          40px;
  --sp-12:          48px;
  --sp-16:          64px;
  --sp-20:          80px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-1:       0 1px 0 rgba(237,237,239,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:       0 1px 0 rgba(237,237,239,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.6);
  --shadow-3:       0 1px 0 rgba(237,237,239,0.04) inset, 0 24px 60px -12px rgba(0,0,0,0.8);
  --shadow-glow:    0 0 0 1px var(--accent-soft), 0 0 24px -4px var(--accent-glow);
  --shadow-focus:   0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);

  /* --- Motion ----------------------------------------------------------- */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:       150ms;
  --dur-base:       220ms;
  --dur-slow:       280ms;
  --dur-amb:        6s;
}

/* ===========================================================================
   Light theme — applied via [data-theme="light"] on <html> or any ancestor.
   Keeps the same token *names* so screen CSS doesn't need branching.
   =========================================================================== */
[data-theme="light"] {
  /* Surfaces — cool warm-whites, never pure #fff (causes glare against text) */
  --bg-deep:        #fafafb;
  --bg-base:        #f3f3f6;
  --bg-elev-1:      #ffffff;
  --bg-elev-2:      #f5f5f8;
  --bg-elev-3:      #ececf1;
  --bg-overlay:     rgba(255,255,255,0.72);

  --line:           rgba(24,24,27,0.07);
  --line-strong:    rgba(24,24,27,0.13);
  --line-focus:     rgba(94,106,210,0.45);

  --fg:             #18181b;   /* near-black, slight cool */
  --fg-dim:         #525258;
  --fg-mute:        #8b8b95;
  --fg-disabled:    #c8c8d0;

  /* Accent unchanged — indigo reads well on both themes */
  --accent:         #4F5BC7;
  --accent-hi:      #5E6AD2;
  --accent-lo:      #404AA1;
  --accent-glow:    rgba(94,106,210,0.25);
  --accent-soft:    rgba(94,106,210,0.08);

  /* Status — slightly darkened for AA contrast on white */
  --ok:             #1B9F4B;
  --warn:           #C97A12;
  --err:            #C73B3B;
  --info:           #1C7BB5;

  /* Monochrome brands are near-white: good on dark, invisible on white.
     Threads and X are black-on-light brands anyway, flip to near-black. */
  --p-threads:      #18181b;
  --p-x:            #18181b;

  /* Shadows — replace the heavy rgba(0,0,0,X) with subtle elevation */
  --shadow-1:       0 1px 0 rgba(24,24,27,0.02) inset, 0 1px 2px rgba(24,24,27,0.06);
  --shadow-2:       0 1px 0 rgba(24,24,27,0.02) inset, 0 8px 24px -8px rgba(24,24,27,0.10);
  --shadow-3:       0 1px 0 rgba(24,24,27,0.02) inset, 0 24px 60px -12px rgba(24,24,27,0.16);
  --shadow-glow:    0 0 0 1px var(--accent-soft), 0 0 24px -4px var(--accent-glow);
  --shadow-focus:   0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}

/* ===========================================================================
   Base
   =========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(94,106,210,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 100%);
  background-attachment: fixed;
}

[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(94,106,210,0.04), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 100%);
}

::selection { background: var(--accent-soft); color: var(--fg); }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* Scrollbars ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(237,237,239,0.06);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: rgba(237,237,239,0.12); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(24,24,27,0.08); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(24,24,27,0.18); }

/* ===========================================================================
   Atoms
   =========================================================================== */

.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

.h-tight { letter-spacing: var(--tracking-tight); font-weight: 500; }

.dim   { color: var(--fg-dim); }
.mute  { color: var(--fg-mute); }

.hr     { height: 1px; background: var(--line); border: 0; }
.vr     { width: 1px; background: var(--line); align-self: stretch; }

/* --- Button --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--fg);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover  { background: var(--bg-elev-2); border-color: var(--line-strong); }
.btn:active { background: var(--bg-elev-3); }
.btn.sm     { height: 26px; padding: 0 10px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn.lg     { height: 40px; padding: 0 18px; font-size: var(--text-base); }
.btn.ghost  { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn.ghost:hover { background: var(--bg-elev-2); color: var(--fg); }
.btn.primary {
  background: var(--accent); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn.primary:hover { background: var(--accent-hi); }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: rgba(242,110,110,0.08); border-color: rgba(242,110,110,0.30); }

/* --- Input --- */
.input, .textarea {
  width: 100%;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  padding: 9px 12px;
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  outline: none;
}
.input:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); background: var(--bg-elev-2); }
.input::placeholder, .textarea::placeholder { color: var(--fg-mute); }
.textarea { min-height: 80px; resize: vertical; font-family: var(--font-ui); line-height: 1.5; }
.input.mono, .textarea.mono { font-family: var(--font-mono); }

/* --- Card --- */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* --- Badge --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 500;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  color: var(--fg-dim);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute); }
.badge.ok  { color: var(--ok);   border-color: rgba(74,222,128,0.20); background: rgba(74,222,128,0.06); }
.badge.ok .dot { background: var(--ok); }
.badge.warn { color: var(--warn); border-color: rgba(245,180,84,0.20); background: rgba(245,180,84,0.06); }
.badge.warn .dot { background: var(--warn); }
.badge.err  { color: var(--err);  border-color: rgba(242,110,110,0.22); background: rgba(242,110,110,0.06); }
.badge.err .dot { background: var(--err); }
.badge.info { color: var(--info); border-color: rgba(110,192,242,0.20); background: rgba(110,192,242,0.06); }
.badge.info .dot { background: var(--info); }
.badge.accent { color: var(--accent-hi); border-color: rgba(94,106,210,0.30); background: var(--accent-soft); }
.badge.accent .dot { background: var(--accent-hi); }

/* --- Segmented --- */
.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  gap: 2px;
}
.seg button {
  height: 26px; padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 500;
  color: var(--fg-dim);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg button:hover { color: var(--fg); }
.seg button.active { background: var(--bg-elev-3); color: var(--fg); box-shadow: 0 1px 0 rgba(237,237,239,0.04) inset; }

/* --- Kbd --- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--fg-dim);
}

/* --- Ambient CC glow utility (used sparingly) --- */
.ambient-glow {
  position: relative;
}
.ambient-glow::after {
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* --- CC monogram variants (single sprite symbol, recolored via CSS) --- */
.ccmark { display: inline-block; color: var(--fg); }
.ccmark-solid    { --cc-accent: #5E6AD2; }
.ccmark-mono     { --cc-accent: currentColor; opacity: 0.85; }
.ccmark-outline .ccmark-outer,
.ccmark-outline .ccmark-inner { fill: none; }
.ccmark-reversed { color: var(--bg-deep); --cc-accent: #5E6AD2; background: var(--fg); border-radius: 50%; }
.ccmark-chase .ccmark-inner-g {
  transform-origin: 50% 50%;
  animation: cc-orbit 3.4s ease-in-out infinite;
}
@keyframes cc-orbit {
  0%   { transform: rotate(-14deg); }
  50%  { transform: rotate( 14deg); }
  100% { transform: rotate(-14deg); }
}