/* ============================================================================
   Counsolero editorial component layer
   ----------------------------------------------------------------------------
   Shared, reusable vocabulary for the editorial design system (cream/ink/blue,
   Cormorant Garamond + Manrope). This is the foundation for migrating the
   daisyUI (`dui-`) dashboard surfaces off daisyUI: every `dui-btn`,
   `dui-badge`, `dui-card`, `dui-select`, `dui-alert`, `dui-link` maps to a
   `.c-*` class here, so page/partial/JS work becomes a className remap against
   one source of truth instead of bespoke per-site styles.

   Tokens mirror landing.html / settings.html / canvas_settings.html. Dark mode
   flips via [data-theme="dark"]; every component reads var(--*), so it adapts
   automatically — no component needs a dark-mode override of its own.

   Load AFTER tailwind.css:
     <link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
     <link rel="stylesheet" href="{% static 'css/editorial.css' %}">

   daisyUI -> editorial mapping (for the migration):
     dui-btn[-primary|-ghost|-outline|-soft|-error|-success|-info]  -> .c-btn[ .c-btn--*]
     dui-btn-sm | dui-btn-xs | dui-btn-square                       -> .c-btn--sm | --xs | --square
     dui-badge[-primary|-success|-warning|-error|-info|-ghost|-outline|-soft|-sm]
                                                                     -> .c-badge[ .c-badge--*]
     dui-card / dui-card-body / dui-card-title                      -> .c-card / .c-card__body / .c-card__title
     dui-select[-bordered|-sm]                                      -> .c-select[ .c-select--sm]
     dui-alert[-info|-success|-warning|-error]                      -> .c-alert[ .c-alert--*]
     dui-link[-primary]                                             -> .c-link[ .c-link--primary]
   ========================================================================== */

/* ── Tokens (canonical copy — keep in sync with the per-page editorial blocks) ── */
:root {
  --c-slate-900: #0c1220;
  --c-slate-800: #1e293b;
  --c-silver:    #eef1f6;
  --c-paper:     #ebe6d9;
  --c-paper-2:   #e0d9c9;
  --c-blue:      #4b7bff;
  --c-blue-deep: #3a5fd9;
  --c-green:     #2f8f5b;
  --c-amber:     #b9772b;
  --c-red:       #c0392b;
  --c-orange:   #c2741c;   /* entry type: events        */
  --c-purple:   #7d5bd0;   /* entry type: personal       */

  --surface:      var(--c-paper);
  --card-surface: var(--c-paper-2);
  --text:         var(--c-slate-900);
  --text-soft:    var(--c-slate-800);
  --accent:       var(--c-blue);
  --line:         rgba(12, 18, 32, 0.10);
  --line-strong:  rgba(12, 18, 32, 0.20);

  /* Aliases the page templates used to re-declare inline (2026-09-10 token
     consolidation). They resolve through the semantic roles above, so the
     dark block below covers them without a second definition. */
  --c-ink:        var(--text);
  --c-ink-soft:   var(--text-soft);
  --c-cream:      var(--surface);
  --c-silver-2:   #dde2eb;

  /* Text drawn ON TOP of --accent (the primary button, accent chips).
     Deliberately NOT --c-silver: silver on the accent blue measures ~3.1:1
     where plain white measures ~3.5:1, so reaching for the nearest existing
     token would have quietly lowered contrast. Not overridden in the dark
     block because --accent stays the same blue in both themes, so the text
     on it must not change either. Added 2026-09-21 so template <style>
     blocks can stop hardcoding #fff -- test_editorial_tokens_single_source
     forbids a raw hex in any template that links this file. */
  --on-accent:    #fff;

  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-ui:      'Manrope', -apple-system, system-ui, sans-serif;

  --c-radius:   12px;
  --c-radius-lg: 16px;
}
[data-theme="dark"] {
  --surface:      var(--c-slate-900);
  --card-surface: var(--c-slate-800);
  --text:         var(--c-silver);
  --text-soft:    rgba(238, 241, 246, 0.72);
  --line:         rgba(238, 241, 246, 0.10);
  --line-strong:  rgba(238, 241, 246, 0.18);
  --c-green:      #6ee7a8;
  --c-amber:      #e0a857;
  --c-red:        #f08a7e;
  --c-orange:      #e0a860;
  --c-purple:      #b6a2f2;
}

/* Theme families (Paper / Contrast) live in their own stylesheet:
   static/css/theme-families.css. They were moved out on 2026-08-25 so the
   templates that declare their own local token block -- and mostly do NOT
   link this file -- can carry the family rules too. See that file for why
   its selectors are :root-qualified. */

/* ── Buttons ──────────────────────────────────────────────────────────────
   Base = pill, Manrope, neutral outline. Modifiers layer intent + size.    */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-ui);
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}
.c-btn:hover  { background: color-mix(in srgb, var(--text) 7%, transparent); }
.c-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.c-btn--primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.c-btn--primary:hover { background: var(--c-blue-deep); border-color: var(--c-blue-deep); }

.c-btn--ghost {
  border-color: transparent; background: transparent; color: var(--text);
}
.c-btn--ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }

.c-btn--outline { background: transparent; border-color: var(--line-strong); color: var(--text); }
.c-btn--outline:hover { border-color: var(--accent); color: var(--accent); }

.c-btn--soft {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: transparent; color: var(--accent);
}
.c-btn--soft:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.c-btn--error   { background: var(--c-red);   border-color: var(--c-red);   color: #fff; }
.c-btn--error:hover { filter: brightness(0.94); }
.c-btn--success { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.c-btn--success:hover { filter: brightness(0.94); }
.c-btn--info    { background: var(--accent); border-color: var(--accent); color: #fff; }
.c-btn--info:hover { background: var(--c-blue-deep); }

/* Sizes */
.c-btn--sm { padding: 8px 16px; font-size: 12px; }
.c-btn--xs { padding: 6px 12px; font-size: 11px; }
/* Square = equal-padding icon button (no min-width pill stretch) */
.c-btn--square { padding: 9px; border-radius: var(--c-radius); aspect-ratio: 1 / 1; }
.c-btn--square.c-btn--sm { padding: 7px; }
.c-btn--square.c-btn--xs { padding: 5px; }

/* ── Badges / pills ───────────────────────────────────────────────────────
   Small status chips. Default = neutral outline.                            */
.c-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-ui);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-soft);
}
.c-badge--sm { font-size: 10px; padding: 3px 8px; }

/* Solid intent badges */
.c-badge--primary { background: var(--accent);  border-color: var(--accent);  color: #fff; }
.c-badge--success { background: var(--c-green);  border-color: var(--c-green);  color: #fff; }
.c-badge--warning { background: var(--c-amber);  border-color: var(--c-amber);  color: #fff; }
.c-badge--error   { background: var(--c-red);    border-color: var(--c-red);    color: #fff; }
.c-badge--info    { background: var(--accent);   border-color: var(--accent);   color: #fff; }
.c-badge--ghost   { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: transparent; color: var(--text-soft); }
.c-badge--outline { background: transparent; border-color: var(--line-strong); color: var(--text-soft); }

/* Soft intent badges (tinted, low-emphasis) — the most common dui-badge-soft case */
.c-badge--soft           { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: transparent; color: var(--text-soft); }
.c-badge--soft.c-badge--success { background: color-mix(in srgb, var(--c-green) 18%, transparent); color: var(--c-green); }
.c-badge--soft.c-badge--warning { background: color-mix(in srgb, var(--c-amber) 18%, transparent); color: var(--c-amber); }
.c-badge--soft.c-badge--error   { background: color-mix(in srgb, var(--c-red) 18%, transparent);   color: var(--c-red); }
.c-badge--soft.c-badge--info,
.c-badge--soft.c-badge--primary { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* ── Card ─────────────────────────────────────────────────────────────────
   Replaces dui-card + glass-card/shadow-glass. Paper surface, soft editorial
   shadow, hairline border.                                                   */
.c-card {
  background: var(--card-surface);
  border: 1px solid var(--line);
  border-radius: var(--c-radius-lg);
  box-shadow:
    0 40px 80px -20px rgba(12, 18, 32, 0.18),
    0 12px 28px -10px rgba(12, 18, 32, 0.10);
}
.c-card--flat { box-shadow: none; }
.c-card--hover { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.c-card--hover:hover {
  box-shadow:
    0 56px 100px -24px rgba(12, 18, 32, 0.24),
    0 16px 36px -12px rgba(12, 18, 32, 0.14);
}
.c-card__body { padding: 26px 28px; }
.c-card__title {
  font-family: var(--f-display);
  font-weight: 500; font-size: 1.4rem; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--text);
  margin: 0 0 4px;
}

/* ── Select ───────────────────────────────────────────────────────────────  */
.c-select {
  font-family: var(--f-ui);
  font-size: 13px; font-weight: 500; line-height: 1.2;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--c-radius);
  padding: 9px 34px 9px 14px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.18s ease;
}
.c-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.c-select--sm { padding: 7px 30px 7px 12px; font-size: 12px; }
/* --bordered is the default look here; class kept for 1:1 mapping from dui-select-bordered */
.c-select--bordered { border-color: var(--line-strong); }

/* ── Input (covers academics.js inline grade editor: dui-input-bordered/-sm) ── */
.c-input {
  font-family: var(--f-ui);
  font-size: 13px; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--c-radius);
  padding: 9px 12px;
  transition: border-color 0.18s ease;
}
.c-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.c-input--sm { padding: 7px 10px; font-size: 12px; }

/* ── Alert / toast ─────────────────────────────────────────────────────────
   Mirrors the .cx-toast already shipped on canvas_settings: card surface +
   accent left border. Intent variants only recolor the left edge.           */
.c-alert {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--f-ui);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--text);
  background: var(--card-surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--c-radius);
  padding: 13px 18px;
}
.c-alert--info    { border-left-color: var(--accent); }
.c-alert--success { border-left-color: var(--c-green); }
.c-alert--warning { border-left-color: var(--c-amber); }
.c-alert--error   { border-left-color: var(--c-red); }

/* ── Link ─────────────────────────────────────────────────────────────────  */
.c-link {
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.c-link:hover { color: var(--accent); border-color: var(--accent); }
.c-link--primary { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.c-link--primary:hover { border-bottom-color: var(--accent); }

/* ── Loaders (editorial) ────────────────────────────────────────────────────
   Reskins the academics chat loaders to the editorial palette. These are
   unlayered overrides, so they win over the daisyUI @layer-components defaults
   in tailwind.css without needing a Tailwind rebuild. Every value reads a
   token, so both light + dark themes track automatically.
   Pages that want these must link editorial.css (academics.html does). */

/* Warm token-driven shimmer — replaces the cool base-gray sweep / animate-pulse.
   No border-radius here so per-element rounding utilities still win. */
@keyframes c-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.c-skel {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text) 6%, var(--card-surface)) 0%,
    color-mix(in srgb, var(--text) 14%, var(--card-surface)) 50%,
    color-mix(in srgb, var(--text) 6%, var(--card-surface)) 100%);
  background-size: 200% 100%;
  animation: c-shimmer 1.4s ease-in-out infinite;
}
/* Skeleton section card (study-guide tiles) */
.c-skel-card { border: 1px solid var(--line); background: var(--card-surface); }

/* Generic skeleton shapes for any loading surface. Compose with .c-skel for
   the shimmer; sizing beyond these defaults belongs to the page's own CSS. */
.c-skel-row   { height: 0.875rem; border-radius: 6px; }
.c-skel-row + .c-skel-row { margin-top: 0.75rem; }
.c-skel-block { border-radius: 10px; }
/* Width variants live HERE, not as Tailwind w-* utilities: tailwind.css is a
   stale prebuilt artifact and several fraction widths never got compiled in,
   so a w-1/2 on a skeleton silently renders full-width. */
.c-skel-w50 { width: 50%; }
.c-skel-w66 { width: 66%; }
.c-skel-w75 { width: 75%; }
.c-skel-w83 { width: 83%; }

/* WCAG 2.3.3: the shimmer is an infinite animation. Under reduced motion,
   freeze it mid-gradient — the block stays a visibly tinted placeholder, it
   just stops sweeping. Covers every consumer of the c-shimmer keyframe. */
@media (prefers-reduced-motion: reduce) {
  .c-skel, .library-skeleton { animation: none; background-position: 50% 0; }
}

/* library-skeleton (chat study library) -> warm shimmer, keeps its own radius */
.library-skeleton {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text) 6%, var(--card-surface)) 0%,
    color-mix(in srgb, var(--text) 14%, var(--card-surface)) 50%,
    color-mix(in srgb, var(--text) 6%, var(--card-surface)) 100%);
  background-size: 200% 100%;
  animation: c-shimmer 1.4s ease-in-out infinite;
  border-radius: 12px;
}

/* "AI is thinking" indicator -> editorial card bubble + muted-ink label/dots */
.typing-message { background: var(--card-surface); border-color: var(--line); }
.typing-label   { color: var(--text-soft); }
.typing-dot     { background: var(--text-soft); }

/* Study-tool generation spinner + caption (loading-spinner is currentColor) */
.study-spinner      { color: var(--accent); }
.study-loading-text { color: var(--text-soft); }

/* Study generation progress (stepped) — editorial accent-tinted card + bar */
.ed-progress-card {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 16px; padding: 12px 16px;
}
.ed-progress-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.ed-progress-text { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--text); }
.ed-progress {
  height: 6px; width: 100%; overflow: hidden; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.ed-progress-bar {
  height: 100%; border-radius: 999px; background: var(--accent);
  transition: width 0.25s ease;
}

/* File-upload progress (academics course materials) — editorial accent on an
   editorial track, with a smooth easeOutQuint curve. The phased fill (byte
   upload -> processing trickle -> 100%) is driven in academics.js uploadFile. */
.upload-progress {
  height: 5px; width: 100%; overflow: hidden; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.upload-progress-bar {
  height: 100%; width: 0%; border-radius: 999px; background: var(--accent);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}