/* ==========================================================================
   Design tokens — единственият източник на визуалния език на Креда.
   Промяна тук се отразява навсякъде: публична страница, продукт, документи.

   Посока: светъл, спокоен и професионален интерфейс. Брандовият градиент
   (розово → лилаво → синьо) се използва пестеливо — само за основното
   действие, активните състояния и малкото ключови акценти. Всичко останало
   е неутрално, за да остане вниманието върху учебния материал.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Бранд: розово → лилаво → синьо ---------------------------------- */
  --rose:   #e0447f;
  --purple: #7c3aed;
  --blue:   #2f6fed;

  /* Един плътен цвят за текст, икони и рамки, където градиент не работи.
     Лилавото е средата на градиента и държи и на бял, и на тъмен фон. */
  --brand-500: #7c3aed;
  --brand-600: #6d28d9;
  --brand-700: #5b21b6;
  --brand-400: #9c6bf5;
  --brand-300: #c4a8fa;
  --brand-100: #f1eafe;

  /* Разложен на съставки, за да може прозрачността да се задава на място:
     rgb(var(--brand-rgb) / 12%) вместо още десет готови променливи. */
  --brand-rgb: 124 58 237;
  --ink-rgb: 23 21 35;

  --gradient: linear-gradient(115deg, var(--rose) 0%, var(--purple) 52%, var(--blue) 100%);
  --gradient-soft: linear-gradient(115deg,
      rgb(224 68 127 / 12%) 0%, rgb(124 58 237 / 12%) 52%, rgb(47 111 237 / 12%) 100%);

  /* ---- Неутрални -------------------------------------------------------
     Сивите са с лек уклон към лилавото на бранда — така изглеждат избрани,
     а не извадени от стандартна палитра. */
  --ink-1000: #0e0d16;
  --ink-900:  #171523;
  --ink-800:  #272336;
  --ink-700:  #3b3749;
  --ink-600:  #55516a;
  --ink-500:  #6b6779;
  --ink-400:  #8e8a9c;
  --ink-300:  #b6b3c2;
  --ink-200:  #dedbe6;
  --ink-100:  #eceaf2;
  --ink-50:   #f7f6fa;

  /* ---- Функционални ----------------------------------------------------- */
  --ok-500:   #12855c;
  --ok-bg:    #e6f6ef;
  --warn-500: #a86a08;
  --warn-bg:  #fdf3e2;
  --err-500:  #c72f45;
  --err-bg:   #fdedef;
  --info-500: #2f6fed;
  --info-bg:  #eaf1fe;

  /* ---- Семантични повърхности ------------------------------------------ */
  --bg:            var(--ink-50);
  --bg-elevated:   #ffffff;
  --surface:       #ffffff;
  --surface-2:     #fbfafd;
  --surface-3:     var(--ink-100);
  --surface-inset: rgb(var(--ink-rgb) / 3%);

  --hover:         rgb(var(--ink-rgb) / 4%);
  --press:         rgb(var(--ink-rgb) / 7%);

  --line:        var(--ink-200);
  --line-strong: var(--ink-300);
  --line-brand:  rgb(var(--brand-rgb) / 28%);

  --text:        var(--ink-900);
  --text-muted:  var(--ink-500);
  --text-faint:  var(--ink-400);
  --text-on-brand: #ffffff;

  /* ---- Типография ------------------------------------------------------- */
  --font-ui: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Literata', Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --fs-display: clamp(2.4rem, 1.3rem + 4.6vw, 4.4rem);
  --fs-h1:      clamp(1.95rem, 1.3rem + 2.8vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  --fs-h4:      clamp(1.02rem, .97rem + .3vw, 1.15rem);
  --fs-lead:    clamp(1rem, .95rem + .45vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      .9125rem;
  --fs-xs:      .8125rem;
  --fs-micro:   .74rem;

  --lh-tight: 1.06;
  --lh-snug:  1.24;
  --lh-body:  1.62;
  --lh-loose: 1.75;

  --track-display: -.03em;
  --track-tight:   -.018em;
  --track-wide:    .14em;

  /* ---- Ритъм (8px база) -------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.5rem; --sp-12: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --gutter:    clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
  --maxw:      1180px;
  --maxw-prose: 68ch;

  /* ---- Форма ------------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Дълбочина ---------------------------------------------------------
     Меки и ниски. В светъл интерфейс сянката разделя, не драматизира. */
  --sh-sm: 0 1px 2px rgb(var(--ink-rgb) / 6%);
  --sh-md: 0 2px 4px rgb(var(--ink-rgb) / 5%), 0 6px 16px -6px rgb(var(--ink-rgb) / 10%);
  --sh-lg: 0 4px 8px rgb(var(--ink-rgb) / 5%), 0 18px 40px -18px rgb(var(--ink-rgb) / 16%);
  --sh-xl: 0 8px 16px rgb(var(--ink-rgb) / 6%), 0 36px 72px -28px rgb(var(--ink-rgb) / 22%);
  --glow-brand: 0 6px 20px -6px rgb(var(--brand-rgb) / 45%);

  /* ---- Движение ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.22,.9,.28,1);
  --ease-in-out: cubic-bezier(.6,.05,.3,1);
  --ease-spring: cubic-bezier(.34,1.42,.5,1);
  --t-fast: 130ms;
  --t-base: 200ms;
  --t-slow: 380ms;

  --z-base: 1;
  --z-sticky: 60;
  --z-nav: 80;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 130;
}

/* Обхватът на генерирания документ. Интерфейсът вече е светъл, затова тук
   се сменя само хартиената нюансировка: чисто бяло поле и по-топли линии,
   за да се различава листът от приложението около него. */
.paper-scope {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fdfcfa;
  --surface-3: #f6f4ef;
  --line: #e3ded4;
  --line-strong: #c9c2b4;
  --text: #1b1813;
  --text-muted: #5c5648;
  --text-faint: #8a8375;
}