:root {
  /* — Renk: yüzey & mürekkep (ideali paleti, Notion katmanlama) — */
  --p-bg:           #f5f4f1;   /* uygulama zemini — ideali krem */
  --p-surface:      #ffffff;   /* kart / panel */
  --p-surface-2:    #faf9f7;   /* ikincil yüzey (sidebar, hover) */
  --p-surface-elevated: #ffffff; /* form / vurgu iç yüzeyi */
  --p-ink:          #1a1a1a;   /* birincil metin — ideali kömür */
  --p-ink-soft:     #5f5e59;   /* ikincil metin */
  --p-ink-faint:    #8e8b86;   /* placeholder / meta */
  --p-line:         #e6e5e3;   /* saç-teli kenar */
  --p-line-strong:  #d4d3cf;

  /* — Aksan: ideali altın — */
  --p-gold:         #b08d57;   /* birincil aksan / CTA */
  --p-gold-hover:   #9c7b49;
  --p-gold-press:   #876841;
  --p-on-accent:    #ffffff;
  --p-gold-tint:    rgba(176,141,87,.12);  /* seçili satır / sıcak vurgu */
  --p-gold-ring:    rgba(176,141,87,.40);  /* focus ring */
  /* — İmza altın: ince sheen — birincil CTA + marka + aktif nav göstergesi (D1) — */
  --p-gold-grad:    linear-gradient(160deg, #bd9962 0%, #b08d57 48%, #9c7b49 100%);
  --p-gold-grad-hover: linear-gradient(160deg, #b08d57 0%, #9c7b49 48%, #876841 100%);
  --p-gold-line:    linear-gradient(180deg, var(--p-gold) 0%, var(--p-gold-press) 100%); /* aktif nav dikey göstergesi */

  /* — Durum renkleri (Atlassian DS) — */
  --p-success:      #6a9a23;
  --p-danger:       #e2483d;
  --p-warning:      #fbc828;
  --p-info:         #2783de;

  /* — Radius skalası (Atlassian) — */
  --p-r-xs: 2px;  --p-r-sm: 4px;  --p-r-md: 8px;  --p-r-lg: 12px;  --p-r-full: 999px;

  /* — Spacing (4px taban) — */
  --p-s-1: 4px; --p-s-2: 8px; --p-s-3: 12px; --p-s-4: 16px; --p-s-6: 24px; --p-s-8: 32px; --p-s-12: 48px;

  /* — Gölge (premium katmanlı set — yumuşak çift-katman + saç-teli) — */
  --p-shadow-sm:    0 1px 2px rgba(28,24,17,.05);
  --p-shadow-card:  0 1px 2px rgba(28,24,17,.05), 0 0 0 1px rgba(28,24,17,.045);
  --p-shadow-pop:   0 4px 12px rgba(28,24,17,.08), 0 12px 32px rgba(28,24,17,.10), 0 0 0 1px rgba(28,24,17,.05);
  --p-shadow-float: 0 2px 6px rgba(28,24,17,.06), 0 16px 40px rgba(28,24,17,.14), 0 0 0 1px rgba(28,24,17,.05); /* popover/float (D1) */
  --p-shadow-modal: 0 8px 24px rgba(28,24,17,.12), 0 24px 56px rgba(28,24,17,.20);
  /* — Birleşik odak halkası (D1) — */
  --p-ring:         0 0 0 2px var(--p-bg), 0 0 0 4px var(--p-gold-ring);

  /* — Tipografi (Raleway = ideali markası) — */
  --p-font:   "Raleway", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --p-mono:   "SF Mono", Menlo, Consolas, monospace;
  --p-fs-xs: 12px; --p-fs-sm: 13px; --p-fs-base: 14px; --p-fs-md: 16px; --p-fs-lg: 20px; --p-fs-xl: 24px; --p-fs-2xl: 32px;
  --p-fs-3xl: 40px; --p-fs-display: 52px;   /* display ölçekleri — sayfa H1 / landing (D1) */
  --p-fw-reg: 400; --p-fw-med: 500; --p-fw-semi: 600; --p-fw-bold: 700;
  --p-lh: 1.5; --p-lh-tight: 1.15;           /* başlık satır yüksekliği */
  /* — Başlık ritmi: letter-spacing (D1) — */
  --p-tracking-tight: -0.02em;   /* büyük başlıklar — rafine sıkışıklık */
  --p-tracking-snug:  -0.01em;   /* orta başlıklar */
  --p-tracking-wide:  0.06em;    /* eyebrow / section-label — uppercase ritmi */

  /* — Hareket (Asana skalası + Notion hızı) — */
  --p-ease:        cubic-bezier(.16,1,.3,1);      /* yumuşak ease-out (varsayılan) */
  --p-ease-bounce: cubic-bezier(.175,.885,.32,1); /* onay/başarı anları */
  --p-ease-spring: cubic-bezier(.34,1.4,.5,1);    /* yaylı mikro-geçiş — hover/active (D1) */
  --p-dur-fast: .1s;  --p-dur: .15s;  --p-dur-slow: .3s;

  /* — Yüzey derinliği: ÇOK ince gradient (premium his, okunabilirlik korunur) — D1 — */
  --p-bg-grad:      linear-gradient(176deg, #f7f6f3 0%, var(--p-bg) 62%);   /* uygulama zemini */
  --p-sidebar-grad: linear-gradient(180deg, #faf9f7 0%, #f2f1ed 100%);      /* sidebar */

  /* — Layout ölçüleri (Slack) — */
  --p-sidebar-w: 280px;  --p-detail-w: 384px;  --p-content-max: 968px;  --p-read-col: 708px;
  --p-topbar-h: 76px;  --p-page-max: 920px;  --p-bottomnav-h: 52px;

  /* — Mobil güvenli alan (çentik / home-indicator) — M1 — */
  --p-safe-top:    env(safe-area-inset-top, 0px);
  --p-safe-right:  env(safe-area-inset-right, 0px);
  --p-safe-bottom: env(safe-area-inset-bottom, 0px);
  --p-safe-left:   env(safe-area-inset-left, 0px);

  /* — z-index skalası (Slack) — */
  --p-z-base: 1; --p-z-sticky: 10; --p-z-drawer: 100; --p-z-modal: 1000; --p-z-toast: 2000;
}

:root[data-theme="dark"]{
  --p-bg:#1a1916; --p-surface:#232220; --p-surface-2:#2b2926; --p-surface-elevated:#302e2a;
  --p-ink:#f0eee9; --p-ink-soft:#bdb9b0; --p-ink-faint:#8a867e;
  --p-line:#37342f; --p-line-strong:#48443d;
  --p-gold:#c9a063; --p-gold-hover:#d8b377; --p-gold-press:#b98f54;
  --p-on-accent:#1a1916;
  --p-gold-tint:rgba(201,160,99,.16); --p-gold-ring:rgba(201,160,99,.45);
  --p-success:#7fb33a; --p-danger:#e0654d; --p-warning:#e0b54a; --p-info:#5aa9e6;
  --p-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --p-shadow-card:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.045);
  --p-shadow-pop:0 4px 12px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  --p-shadow-float:0 2px 6px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
  --p-shadow-modal:0 8px 24px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.66);

  /* — İmza altın + yüzey gradient + ring (dark) — D1 — */
  --p-gold-grad:linear-gradient(160deg,#d4ae72 0%,#c9a063 48%,#b98f54 100%);
  --p-gold-grad-hover:linear-gradient(160deg,#dcb87d 0%,#d8b377 48%,#c9a063 100%);
  --p-gold-line:linear-gradient(180deg,var(--p-gold) 0%,var(--p-gold-press) 100%);
  --p-ring:0 0 0 2px var(--p-bg),0 0 0 4px var(--p-gold-ring);
  --p-bg-grad:linear-gradient(176deg,#1d1c19 0%,var(--p-bg) 62%);
  --p-sidebar-grad:linear-gradient(180deg,#2b2926 0%,#211f1c 100%);
}