/* Popkapsül tasarım değişkenleri. Sayfalarda sabit renk ya da ölçü yazılmaz,
   bunlar kullanılır. Açık tema yayında; karanlık tema tanımlı ama kapalı
   (html'e data-theme="dark" verilince açılır). Kontrast oranları panelde
   Tasarım sayfasında hesaplanıp gösterilir. */

:root {
    /* Zemin ve yazı */
    --color-bg: #FBF3EC;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F6E7DB;
    --color-text: #1E3557;
    --color-text-muted: #4A5C78;
    --color-line: #1E3557;

    /* Logodan: mercan ve pembe sadece dolgu; tıklananlar koyu mercan */
    --color-coral: #EE5D6C;
    --color-pink: #F47E93;
    --color-action: #BE3A48;
    --color-action-hover: #A8323D;
    --color-on-action: #FFFFFF;

    /* Takvim renkleri: açık tonlar dolgu, koyu tonlar yazı */
    --color-turquoise: #8DCBCA;
    --color-turquoise-text: #1D7173;
    --color-orange: #F08C3A; /* logodaki #F07A2A üstünde lacivert yazı 4,4:1 kalıyordu */
    --color-orange-text: #A84A12;
    --color-purple: #A64BCF;
    --color-purple-text: #7E35A1;

    --color-error: #9B2335;
    --color-on-fill: #1E3557;

    /* Takvim rolleri */
    --cal-concert: var(--color-turquoise);
    --cal-concert-text: var(--color-turquoise-text);
    --cal-release: var(--color-orange);
    --cal-release-text: var(--color-orange-text);
    --cal-birthday: var(--color-purple);
    --cal-birthday-text: var(--color-purple-text);

    /* Logodaki pembe-turuncu-mor geçiş (sadece üst bant ve kapaklar) */
    --gradient-brand: linear-gradient(100deg, #F47E93 0%, #F07A2A 48%, #A64BCF 100%);

    /* Yazı tipleri (21 Ekim'de seçildi: Poppins + Figtree) */
    --font-heading: "Poppins", ui-rounded, system-ui, sans-serif;
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --heading-weight: 800;

    /* Yazı ölçeği: metin 16 px'den küçük olmaz; en büyük başlık masaüstünde 6,5 katı */
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --text-3xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    --text-display: clamp(3rem, 1.6rem + 7vw, 6.5rem);
    /* Türkçe harflerin üst noktaları (Ü, İ) ve alt çengelleri (ş, ç) birbirine değmesin */
    --leading-display: 1.1;
    --leading-tight: 1.22;
    --leading-body: 1.6;

    /* Boşluklar */
    --space: 1rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;

    /* Biçim: her yerde aynı köşe ve gölge olmasın diye birkaç seçenek */
    --radius-sm: 0.375rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.75rem;
    --radius-pill: 999px;
    --border: 2px solid var(--color-line);
    --shadow-sticker: 4px 4px 0 var(--color-line);
    --shadow-soft: 0 10px 24px -14px rgba(30, 53, 87, 0.45);

    --page-max: 72rem;
    --motion-fast: 160ms;
    --motion-slow: 420ms;

    color-scheme: light;
}

/* Karanlık tema: tanımlı, ilk sürümde kapalı. Koyu zeminde logonun konturu krem olur. */
:root[data-theme="dark"],
[data-theme="dark"] {
    --color-bg: #14233A;
    --color-surface: #1B2D4A;
    --color-surface-alt: #22385A;
    --color-text: #FBF3EC;
    --color-text-muted: #C9D3E2;
    --color-line: #FBF3EC;
    --color-action: #F49AA4;
    --color-action-hover: #F7B3BA;
    --color-on-action: #14233A;
    --color-turquoise-text: #8DCBCA;
    --color-orange-text: #F5A26B;
    --color-purple-text: #C98BE6;
    --color-error: #F49AA4;
    --color-on-fill: #14233A;
    --shadow-sticker: 4px 4px 0 #0B1626;
    --shadow-soft: 0 10px 24px -14px rgba(0, 0, 0, 0.7);

    color-scheme: dark;
}