/* ============================================================
PRAGMO — TASARIM TOKEN SİSTEMİ (B165 FAZ 0A)
----------------------------------------------------------------
Tek kaynak gerçek. 5 modül + ortak sayfalar buradan okur.
forest/mint ana palet + her modülün kendi renk değişkeni.
Modül-aware: → --brand otomatik fineo'ya döner.
Yüklenme:
============================================================ */
:root {
/* ============================================
RENKLER — Ortak palet (forest/mint/cream/gray)
============================================ */
--color-forest-900: #052E16;
--color-forest-800: #14532D;
--color-forest-700: #166534;
--color-forest-600: #15803D;
--color-mint-100: #DCFCE7;
--color-mint-200: #BBF7D0;
--color-mint-300: #86EFAC;
--color-mint-400: #4ADE80;
--color-mint-500: #22C55E;
--color-mint-600: #16A34A;
--color-cream-50: #FAFCF1;
--color-cream-100: #F7FEE7;
--color-cream-200: #EEF7D5;
--color-cream-300: #DCEFB4;
--color-cream-400: #ECFCCB;
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
/* Semantic (durum) */
--color-success: #22C55E;
--color-warning: #F59E0B;
--color-danger: #DC2626;
--color-info: #3B82F6;
/* ============================================
MODÜL MARKA RENKLERİ
Her modülün üçlüsü: deep (bg), color (accent), soft (light bg).
attribute'u --brand-* alias'larını seçer.
============================================ */
--brand-leno-deep: #6E4B00;
--brand-leno-color: #EFA31D;
--brand-leno-soft: #FBF1D8;
--brand-fineo-deep: #042C53;
--brand-fineo-color: #85B7EB;
--brand-fineo-soft: #E6F1FB;
--brand-lexo-deep: #4B1528;
--brand-lexo-color: #EF9F27;
--brand-lexo-soft: #FBEAF0;
--brand-wello-deep: #4A1B0C;
--brand-wello-color: #F0997B;
--brand-wello-soft: #FAECE7;
--brand-vendo-deep: #04342C;
--brand-vendo-color: #5DCAA5;
--brand-vendo-soft: #E1F5EE;
--brand-calcuro-deep: #1E3A8A;
--brand-calcuro-color: #93C5FD;
--brand-calcuro-soft: #EFF6FF;
/* Pragmo (default — landing/dashboard ortak sayfalar) */
--brand-pragmo-deep: var(--color-forest-800);
--brand-pragmo-color: var(--color-mint-500);
--brand-pragmo-soft: var(--color-mint-100);
/* Aktif modül alias'ları — body[data-modul] ile override */
--brand-deep: var(--brand-pragmo-deep);
--brand-color: var(--brand-pragmo-color);
--brand-soft: var(--brand-pragmo-soft);
/* ============================================
SEMANTIC TOKEN'LAR
============================================ */
--bg-app: var(--color-cream-200);
--bg-surface: var(--color-cream-50);
--bg-elevated: #FFFFFF;
--bg-muted: var(--color-gray-100);
--bg-overlay: rgba(8, 46, 29, 0.55);
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-700);
--text-tertiary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
--text-on-brand: #FFFFFF;
--text-link: var(--color-mint-600);
--border-default: var(--color-gray-200);
--border-strong: var(--color-gray-300);
--border-divider: var(--color-gray-100);
--border-brand: var(--brand-color);
/* ============================================
TİPOGRAFİ
Fraunces (başlık serif) + Albert Sans (gövde sans)
Self-host @font-face: /shared/fonts/fonts.css
============================================ */
--font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
/* Boyut ölçeği (modular type scale, ~1.2 oranı) */
--text-xs: 11px;
--text-sm: 12px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
/* Ağırlıklar */
--weight-regular: 400;
--weight-medium: 500;
--weight-semi: 600;
--weight-bold: 700;
/* Satır yüksekliği */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.55;
--leading-loose: 1.75;
/* ============================================
BOŞLUK (4px tabanlı ölçek)
============================================ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* ============================================
KÖŞE YARIÇAPI
============================================ */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* ============================================
GÖLGE
============================================ */
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(8, 46, 29, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 8px rgba(8, 46, 29, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 24px rgba(8, 46, 29, 0.12), 0 4px 8px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 48px rgba(8, 46, 29, 0.18), 0 8px 16px rgba(0, 0, 0, 0.06);
--shadow-focus: 0 0 0 3px rgba(74, 222, 128, 0.35);
/* ============================================
ÇİZGİ KALINLIK + DASH STİLİ
============================================ */
--border-width-thin: 1px;
--border-width-base: 1.5px;
--border-width-thick: 2px;
/* ============================================
GEÇİŞ / ANİMASYON
============================================ */
--t-fast: 120ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
--t-base: 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
--t-slow: 300ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
/* ============================================
Z-INDEX ÖLÇEĞİ
Üst üste binen bileşenler için sıralı katmanlama.
Mevcut toast/coachmark/modal'lar buraya migrate edilecek.
============================================ */
--z-base: 0; /* normal akış */
--z-sticky: 100; /* sticky header / nav */
--z-dropdown: 1000; /* menu, select dropdown */
--z-overlay: 1100; /* sayfa overlay (dim) */
--z-modal: 1200; /* modal/dialog */
--z-popover: 1300; /* popover/menu (modal üstünde) */
--z-tooltip: 1400; /* tooltip/coachmark */
--z-toast: 1500; /* toast/snackbar (her şeyin üstünde) */
--z-max: 2147483647;
}
/* ============================================
MODÜL-AWARE TEMA SEÇİMİ
→ tüm bileşenler fineo brand'ını kullanır.
============================================ */
[data-modul="leno"] { --brand-deep: var(--brand-leno-deep); --brand-color: var(--brand-leno-color); --brand-soft: var(--brand-leno-soft); }
[data-modul="fineo"] { --brand-deep: var(--brand-fineo-deep); --brand-color: var(--brand-fineo-color); --brand-soft: var(--brand-fineo-soft); }
[data-modul="lexo"] { --brand-deep: var(--brand-lexo-deep); --brand-color: var(--brand-lexo-color); --brand-soft: var(--brand-lexo-soft); }
[data-modul="wello"] { --brand-deep: var(--brand-wello-deep); --brand-color: var(--brand-wello-color); --brand-soft: var(--brand-wello-soft); }
[data-modul="vendo"] { --brand-deep: var(--brand-vendo-deep); --brand-color: var(--brand-vendo-color); --brand-soft: var(--brand-vendo-soft); }
[data-modul="calcuro"]{ --brand-deep: var(--brand-calcuro-deep);--brand-color: var(--brand-calcuro-color);--brand-soft: var(--brand-calcuro-soft); }
[data-modul="pragmo"] { --brand-deep: var(--brand-pragmo-deep); --brand-color: var(--brand-pragmo-color); --brand-soft: var(--brand-pragmo-soft); }
/* ============================================
İKON SİSTEMİ (B166-PG-ICONS — Faz 1 altyapı)
emoji render normalizasyonu + .pg-icon shell.
Faz 2: HTML emoji → SVG ikon kümesine toplu geçiş.
============================================ */
/* DİKKAT: body'de "emoji" rakamları (0-9) da emoji-sunumuna düşürüp keycap kutucuk
yapıyordu (sayı tabloları okunmuyordu). Body artık "text"; emoji sunumu yalnız
ikon kabuğunda (.pg-icon) zorlanır. Emoji-only (📤) ve açık-VS16 (1️⃣ ⚙️) zaten korunur. */
body { font-variant-emoji: text; }
.pg-icon { display: inline-flex; align-items: center; justify-content: center;
width: var(--icon-size, 1em); height: var(--icon-size, 1em);
font-style: normal; line-height: 1; font-variant-emoji: emoji; }
/* ============================================
BREAKPOINT REFERANSLARI (sadece referans, CSS değişkeniyle media query yapılmaz)
--bp-sm: 480px --bp-md: 768px --bp-lg: 1024px --bp-xl: 1280px
============================================ */