/* UrduLead design tokens — single source of truth.
   Anthropic-style warm palette, terracotta accent.
   Category brand colors DB se aate hain (categories.brand_color). */

:root {
    /* Colors */
    --color-bg: #F0EEE6;            /* ivory — matte */
    --color-ink: #141413;           /* warm near-black */
    --color-primary: #D97757;       /* terracotta — links, buttons, ticker, active */
    --color-primary-dark: #C05F3C;  /* hover / pressed */
    --color-muted: #6B6862;         /* secondary text — dates, captions */
    --color-border: #DAD5C9;        /* warm subtle border */
    --color-card-bg: #FAF9F5;       /* card surface, lighter than bg */
    --color-on-primary: #FAF9F5;    /* text/chips on primary backgrounds */
    --color-input-bg: #FFFFFF;      /* form fields — lighter than card for contrast */

    /* Status + feedback (chips/badges) — warm family, readable ink */
    --color-status-draft-bg: #E5E1D6;      /* draft — warm grey */
    --color-status-review-bg: #F2E3BC;     /* review — warm amber */
    --color-status-review-ink: #7A5C14;
    --color-status-published-bg: #E0E8D8;  /* published — warm green */
    --color-status-published-ink: #4F6B45;
    --color-danger: #B4432C;               /* delete / breaking / errors */
    --color-danger-bg: #F5DCD2;
    --color-success-bg: var(--color-status-published-bg);
    --color-success-ink: var(--color-status-published-ink);
    --color-hover-tint: rgba(217, 119, 87, 0.06);  /* row hover etc. */
    /* Ticker patti (text: on-primary). Primary terracotta par light text sirf 2.96:1 tha —
       wahi hue (15°), gehra: 4.71:1. Breaking zyada surkh (hue 4°) taake alag pehchani jaye. */
    --color-ticker-bg: #BB4E2A;     /* 4.71:1 */
    --color-breaking: #A3241B;      /* 7.05:1 */

    /* Type scale */
    --font-urdu: "Noto Nastaliq Urdu", serif;
    --font-latin: "Source Sans 3", system-ui, sans-serif;
    --fs-h1: 1.9rem;
    --fs-h2: 1.45rem;
    --fs-h3: 1.15rem;
    --fs-body: 1rem;
    --fs-small: 0.85rem;
    --lh-urdu: 2.1;                 /* Nastaliq needs generous line-height */
    --lh-tight: 1.8;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    /* Radius & shadows */
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 3px rgba(20, 20, 19, 0.06), 0 4px 14px rgba(20, 20, 19, 0.05);
    --shadow-card-hover: 0 2px 6px rgba(20, 20, 19, 0.08), 0 8px 22px rgba(20, 20, 19, 0.08);

    /* Mausam ke icons */
    --color-sun: #D99A00;
    --color-moon: #8C8A85;
    --color-cloud: #A7A39A;
    --color-rain: #3A78AD;
    --color-snow: #7FA3C2;

    /* Category brand color (DB) text ke liye kitna ink me milaya jaye — light me bilkul nahi */
    --brand-mix: 0%;

    color-scheme: light;
}

/* Dark theme — warm, Anthropic-style. <head> ka inline script data-theme lagata hai
   (localStorage choice, warna system ki prefers-color-scheme). */
:root[data-theme="dark"] {
    --color-bg: #1F1E1D;
    --color-ink: #F0EEE6;
    --color-primary: #D97757;       /* 4.7:1 on card, 5.3:1 on bg */
    --color-primary-dark: #E4906F;  /* hover — dark par thora roshan */
    --color-muted: #A8A49C;         /* 5.9:1 on card */
    --color-border: #3A3835;
    --color-card-bg: #2A2927;
    --color-on-primary: #1F1E1D;    /* terracotta par dark text — 5.3:1 */
    --color-input-bg: #242321;

    --color-status-draft-bg: #3A3835;
    --color-status-review-bg: #4A3D1E;
    --color-status-review-ink: #E8C877;
    --color-status-published-bg: #2F3D2B;
    --color-status-published-ink: #A9C79C;
    --color-danger: #E8846B;
    --color-danger-bg: #4A2A22;
    --color-hover-tint: rgba(217, 119, 87, 0.12);
    --color-ticker-bg: #D97757;     /* dark text ke saath 5.33:1 — badalne ki zaroorat nahi */
    --color-breaking: #EE6352;      /* 5.19:1, hue 6.5° — terracotta se zyada surkh */

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.35);

    --color-sun: #F2C14E;
    --color-moon: #E6E1D3;
    --color-cloud: #8E8A82;
    --color-rain: #7DB1DE;
    --color-snow: #CFE2F2;

    /* Gehre brand colors (e.g. #1F6F5C) dark card par dikhein — ink me 45% milao */
    --brand-mix: 45%;

    color-scheme: dark;
}