/* ==========================================================================
   AIBrandPro — design-v2 theme ("Blue room")
   ONE shared file for the website, the app and the legal pages.
   - Colours, fonts, spacing and radii are CSS variables (tokens) below.
   - Old variable names used by index.html (--purple, --bg, --text2 …) are
     mapped to the new palette, so older screens follow the new look.
   - Fonts are self-hosted (public/fonts, SIL Open Font License).
   - Spark orange is ONLY for the logo ball, the bolt and tiny highlights.
   ========================================================================== */

/* ---------- Fonts (variable woff2, weights 400–600) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('/fonts/lora-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('/fonts/lora-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  /* brand */
  --c-brand: #5B4FCF;          /* buttons, links, accents */
  --c-brand-hover: #4E43BC;
  --c-ink: #0E0E12;            /* headlines & text */
  --c-white: #FFFFFF;          /* cards & surfaces */
  --c-mist: #F7F6FB;           /* page background */
  --c-tint: #EEECFB;           /* selected items, chips */
  --c-soft: #A9A2EC;           /* soft blue (logo low plinth, light accents) */
  --c-spark: #E8642A;          /* ONLY logo ball, bolt, tiny highlights */
  /* text greys (all ≥ 4.5:1 on white and mist) */
  --c-text-2: #55546A;
  --c-text-3: #6B6A7B;
  --c-line: #E6E4F0;           /* borders */
  --c-line-strong: #D5D2E6;
  /* status */
  --c-posted: #2F8F6B;   --c-posted-bg: #E5F3EC;
  --c-missed: #C9443D;   --c-missed-bg: #FBE9E7;
  --c-soon: #B7791F;     --c-soon-bg: #FBF1DF;  --c-soon-text: #8A5A12;
  --c-scheduled: #5B4FCF; --c-scheduled-bg: #EEECFB;
  --c-idea: #6B6A7B;     --c-idea-bg: #EFEEF4;

  /* type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  /* spacing scale (4 px steps) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

  /* radii & shadows */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(14, 14, 18, .04), 0 8px 24px rgba(91, 79, 207, .06);
  --shadow-pop: 0 18px 50px rgba(14, 14, 18, .14);
  --shadow-brand: 0 8px 20px rgba(91, 79, 207, .28);
  --focus-ring: 0 0 0 3px rgba(91, 79, 207, .28);

  /* old names used by index.html → new palette */
  --bg: var(--c-mist);
  --bg2: #EFEEF6;
  --bg3: var(--c-white);
  --text: var(--c-ink);
  --text2: var(--c-text-2);
  --text3: var(--c-text-3);
  --border: var(--c-line);
  --purple: var(--c-brand);
  --purple-light: var(--c-tint);
  --purple-mid: var(--c-soft);
  --green: var(--c-posted);
  --green-light: var(--c-posted-bg);
  --blue: var(--c-brand);
  --red: var(--c-missed);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--c-mist);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
/* the signature detail: ONE italic blue word per headline */
.accent, h1 em, h2 em, h3 em { font-family: var(--font-serif); font-style: italic; color: var(--c-brand); font-weight: 400; }
a { color: var(--c-brand); }
::selection { background: var(--c-tint); color: var(--c-ink); }

/* visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ---------- Buttons (pill) ---------- */
.btn, .btn-hero, .btn-plan, .btn-upgrade {
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { opacity: 1; }
.btn-purple, .btn-primary {
  background: var(--c-brand); color: #fff; border: 1px solid var(--c-brand);
  box-shadow: var(--shadow-brand);
}
.btn-purple:hover, .btn-primary:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); }
.btn-outline, .btn-secondary {
  background: #fff; color: var(--c-ink); border: 1px solid var(--c-line-strong);
}
.btn-outline:hover, .btn-secondary:hover { background: var(--c-mist); border-color: var(--c-soft); }
.btn-dark { background: var(--c-ink); color: #fff; border: 1px solid var(--c-ink); }
.btn-dark:hover { background: #24242C; }
.btn-danger { background: var(--c-missed); color: #fff; border: 1px solid var(--c-missed); }
.btn-danger:hover { background: #B23A34; }
.btn:disabled, .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-plan.purple { color: #fff; }
.btn-upgrade { border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink); }
.btn-upgrade:hover { background: var(--c-tint); border-color: var(--c-soft); }

/* ---------- Form fields ---------- */
.form-group input, .form-group select, .form-group textarea,
.filter-bar select, .cta-form input, .field {
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong);
  background: #fff;
  font-family: var(--font-sans);
  color: var(--c-ink);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.filter-bar select:focus, .cta-form input:focus, .field:focus {
  border-color: var(--c-brand); box-shadow: var(--focus-ring); outline: none;
}
.form-group label { color: var(--c-text-2); }
.form-error { color: var(--c-missed); }

/* ---------- Cards ---------- */
.dash-card, .metric-card, .card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.modal { border-radius: var(--r-xl); box-shadow: var(--shadow-pop); }
.modal-overlay { background: rgba(14, 14, 18, .42); }
#toast { background: var(--c-ink); border-radius: var(--r-pill); }
#toast.error { background: var(--c-missed); }

/* ---------- Chips & status badges ---------- */
.badge, .chip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--c-idea-bg); color: var(--c-idea);
}
.chip--idea, .badge.draft, .badge.archived, .badge.idea { background: var(--c-idea-bg); color: #55546A; }
.chip--scheduled, .badge.scheduled, .badge.active { background: var(--c-scheduled-bg); color: var(--c-scheduled); }
.chip--posted, .badge.posted, .badge.published, .badge.completed { background: var(--c-posted-bg); color: #24735A; }
.chip--missed, .badge.missed { background: var(--c-missed-bg); color: #B23A34; }
.chip--soon, .badge.soon, .badge.paused { background: var(--c-soon-bg); color: var(--c-soon-text); }
/* content-type badges: calm tint instead of many colours */
.badge.Blog, .badge.Email, .badge.Social, .badge.Social\.Post, .badge.SEO, .badge.Ad\.Copy { background: var(--c-tint); color: #4A3FB8; }

/* "Coming soon" items: greyed, not clickable, small label */
.is-soon, [aria-disabled="true"].soon { opacity: .6; cursor: not-allowed; }
.soon-label {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-soon-bg); color: var(--c-soon-text);
}

/* "Powered by SAN International" pill with the orange bolt */
.powered-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .78); border: 1px solid var(--c-line);
  font-family: var(--font-sans); font-size: 13px; color: #3A3946;
  box-shadow: 0 2px 10px rgba(14, 14, 18, .05);
}
.powered-badge svg { width: 12px; height: 16px; flex: none; }

/* ---------- Logo ---------- */
/* Clear space = the ball's width; never stretch, recolour or add effects. */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo img { height: 28px; width: auto; display: block; }
.brand-logo--sm img { height: 24px; }   /* minimum size for the full logo */
.brand-mark img { height: 24px; width: auto; }

/* ---------- App shell + calendar: old fixed greys → new palette ----------
   (Stage 1 only re-colours; the shell layout itself is redesigned in Stage 3,
   the calendar in Stage 4d.) */
.dash-topbar { background: #fff; border-bottom-color: var(--c-line); }
.sidebar { background: #fff; border-right-color: var(--c-line); }
.dash-main { background: var(--c-mist); }
.cal-day.other { background: #FAFAFD; }
.cal-chip.st-idea, .cal-ep-status.st-idea { background: var(--c-idea-bg); border-color: var(--c-idea); color: #55546A; }
.cal-chip.st-scheduled, .cal-ep-status.st-scheduled { background: var(--c-scheduled-bg); border-color: var(--c-scheduled); color: #4A3FB8; }
.cal-chip.st-posted, .cal-ep-status.st-posted { background: var(--c-posted-bg); border-color: var(--c-posted); color: #24735A; }
.cal-chip.st-missed, .cal-ep-status.st-missed { background: var(--c-missed-bg); border-color: var(--c-missed); color: #B23A34; }
.cal-legend .l-idea::before { background: var(--c-idea); }
.cal-legend .l-scheduled::before { background: var(--c-scheduled); }
.cal-legend .l-posted::before { background: var(--c-posted); }
.cal-legend .l-missed::before { background: var(--c-missed); }

/* Text only for screen readers (e.g. the state of a progress step). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}