/* =========================================================
   KetabGard — Phase 3.5 Design System (Liquid Glass, warm brand)
   Single source of design tokens. Legacy names are aliased to
   the new tokens so existing rules update automatically.
   ========================================================= */
:root {
  /* --- Brand palette (warm browns / sand) --- */
  --kg-primary:        #A47764;
  --kg-primary-strong: #87553F;
  --kg-primary-deep:   #6E4230;
  --kg-primary-soft:   #D9C0AB;
  --kg-primary-tint:   #F2E6D8;

  --kg-bg:      #F7E8DB;   /* warm background */
  --kg-beige:   #E4D1B9;   /* beige */
  --kg-sand:    #CEA889;   /* light brown / sand */
  --kg-cream:   #FCF7EF;   /* solid warm card surface */
  --kg-cream-2: #F3E7D7;   /* deeper field surface */
  --kg-cream-3: #EFDCC6;

  /* --- Ink / text (warm neutrals) --- */
  --kg-ink:       #3A2E25;
  --kg-ink-2:     #6B5644;
  --kg-ink-3:     #99836F;

  /* --- Status (harmonized, muted) --- */
  --kg-success:      #4E8A5C;
  --kg-success-soft: #E2EFE1;
  --kg-danger:       #B0483C;
  --kg-danger-soft:  #F6E1DA;
  --kg-warning:      #AF7E2E;
  --kg-warning-soft: #F6EAD2;
  --kg-accent:       #C98A5E;
  --kg-accent-soft:  #F0DCC4;

  /* --- Liquid glass --- */
  --kg-glass-bg:      rgba(253, 247, 240, .68);
  --kg-glass-strong:  rgba(253, 247, 240, .88);
  --kg-glass-border:  rgba(164, 119, 100, .16);
  --kg-glass-border-2:rgba(164, 119, 100, .30);
  --kg-glass-shadow:  0 20px 45px -18px rgba(90, 62, 42, .34);
  --kg-glass-blur:    saturate(150%) blur(16px);
  --kg-bg-glow-1: rgba(206, 168, 137, .34);
  --kg-bg-glow-2: rgba(228, 209, 185, .50);
  --kg-bg-glow-3: rgba(216, 192, 171, .32);
  --kg-icon-glow: rgba(164,119,100,.5);

  /* --- Radii --- */
  --kg-r-xs:   10px;
  --kg-r-sm:   14px;
  --kg-r-md:   20px;
  --kg-r-lg:   28px;
  --kg-r-xl:   40px;
  --kg-r-pill: 999px;

  /* --- Shadows --- */
  --kg-sh-sm: 0 2px 10px -5px rgba(80, 55, 35, .16);
  --kg-sh:    0 14px 32px -14px rgba(80, 55, 35, .30);
  --kg-sh-lg: 0 28px 60px -20px rgba(58, 40, 26, .42);

  /* --- Motion --- */
  --kg-ease: cubic-bezier(.21, .78, .2, 1);
  --kg-transition: .22s var(--kg-ease);

  /* --- Typography --- */
  --kg-font: 'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --kg-font-head: 'Vazirmatn', sans-serif;
  --kg-fs-xs:  .78rem;
  --kg-fs-sm:  .88rem;
  --kg-fs:     1rem;
  --kg-fs-md:  1.12rem;
  --kg-fs-lg:  1.3rem;
  --kg-fs-xl:  1.62rem;
  --kg-fs-2xl: 2.15rem;

  /* --- Layout --- */
  --kg-header-h: 66px;
  --kg-container-w: 1200px;
  --kg-bottom-nav-h: 64px;
  --kg-gap-sm: 10px;
  --kg-gap: 16px;
  --kg-gap-lg: 28px;
  --kg-section-gap: 46px;

  /* ==================== legacy aliases (auto-update rest of app) ==================== */
  --bg: var(--kg-bg);
  --surface: var(--kg-cream);
  --surface-2: var(--kg-cream-2);
  --surface-3: var(--kg-cream-3);

  --primary:        var(--kg-primary);
  --primary-strong: var(--kg-primary-strong);
  --primary-soft:   var(--kg-primary-soft);
  --primary-tint:   var(--kg-primary-tint);
  --teal:           var(--kg-sand);
  --teal-soft:      var(--kg-beige);
  --accent:         var(--kg-accent);
  --accent-soft:    var(--kg-accent-soft);
  --rose-soft:      var(--kg-danger-soft);
  --danger:         var(--kg-danger);
  --danger-soft:    var(--kg-danger-soft);
  --success:        var(--kg-success);
  --success-soft:   var(--kg-success-soft);
  --warning:        var(--kg-warning);
  --warning-soft:   var(--kg-warning-soft);

  --text:       var(--kg-ink);
  --text-2:     var(--kg-ink-2);
  --text-muted: var(--kg-ink-3);
  --link:       var(--kg-primary-strong);

  --border:        var(--kg-glass-border);
  --border-strong: var(--kg-glass-border-2);

  --shadow-sm: var(--kg-sh-sm);
  --shadow:    var(--kg-sh);
  --shadow-lg: var(--kg-sh-lg);

  --radius-sm:  var(--kg-r-sm);
  --radius:     var(--kg-r-md);
  --radius-lg:  var(--kg-r-lg);
  --radius-pill: var(--kg-r-pill);

  --gap-sm: var(--kg-gap-sm);
  --gap:    var(--kg-gap);
  --gap-lg: var(--kg-gap-lg);
  --section-gap: var(--kg-section-gap);

  --header-h: var(--kg-header-h);
  --container-w: var(--kg-container-w);
  --bottom-nav-h: var(--kg-bottom-nav-h);

  --font: var(--kg-font);
  --font-heading: var(--kg-font-head);
  --fs-xs: var(--kg-fs-xs);
  --fs-sm: var(--kg-fs-sm);
  --fs-base: var(--kg-fs);
  --fs-lg: var(--kg-fs-lg);
  --fs-xl: var(--kg-fs-xl);
  --fs-2xl: var(--kg-fs-2xl);

  --transition: var(--kg-transition);
  --focus-ring: 0 0 0 3px rgba(164, 119, 100, .32);
}

/* Optional user palettes. Legacy aliases above continue to follow these tokens. */
:root[data-theme="sage"] {
  --kg-primary:#829477; --kg-primary-strong:#5D7352; --kg-primary-deep:#40563B; --kg-primary-soft:#C8D5BD; --kg-primary-tint:#E5EDE0;
  --kg-bg:#E9EFE5; --kg-beige:#D6E0D0; --kg-sand:#AEC09F; --kg-cream:#F8FAF5; --kg-cream-2:#ECF1E8; --kg-cream-3:#E1E9DB;
  --kg-ink:#30392D; --kg-ink-2:#596650; --kg-ink-3:#84907C;
  --kg-glass-bg:rgba(248,250,245,.70); --kg-glass-strong:rgba(248,250,245,.90); --kg-glass-border:rgba(93,115,82,.18); --kg-glass-border-2:rgba(93,115,82,.32);
  --kg-bg-glow-1:rgba(143,174,126,.28); --kg-bg-glow-2:rgba(191,211,178,.42); --kg-bg-glow-3:rgba(125,151,111,.22); --kg-icon-glow:rgba(93,115,82,.50);
}
:root[data-theme="ocean"] {
  --kg-primary:#6F9AA2; --kg-primary-strong:#3F707B; --kg-primary-deep:#2D5660; --kg-primary-soft:#B9D2D5; --kg-primary-tint:#DDEBED;
  --kg-bg:#E5EFF1; --kg-beige:#D1E1E3; --kg-sand:#9EBFC3; --kg-cream:#F7FAFA; --kg-cream-2:#E9F1F2; --kg-cream-3:#DDE9EB;
  --kg-ink:#29383B; --kg-ink-2:#50686D; --kg-ink-3:#7C9295;
  --kg-glass-bg:rgba(247,250,250,.70); --kg-glass-strong:rgba(247,250,250,.90); --kg-glass-border:rgba(63,112,123,.18); --kg-glass-border-2:rgba(63,112,123,.32);
  --kg-bg-glow-1:rgba(91,157,171,.30); --kg-bg-glow-2:rgba(180,216,221,.45); --kg-bg-glow-3:rgba(102,146,158,.23); --kg-icon-glow:rgba(63,112,123,.52);
}
:root[data-theme="lavender"] {
  --kg-primary:#9A86AD; --kg-primary-strong:#735F8A; --kg-primary-deep:#55436D; --kg-primary-soft:#D2C6DF; --kg-primary-tint:#EEE8F3;
  --kg-bg:#F0EAF3; --kg-beige:#E2D8EA; --kg-sand:#C0ADCF; --kg-cream:#FBF8FC; --kg-cream-2:#F1EBF4; --kg-cream-3:#E8DFEE;
  --kg-ink:#39313F; --kg-ink-2:#665B70; --kg-ink-3:#93879B;
  --kg-glass-bg:rgba(251,248,252,.70); --kg-glass-strong:rgba(251,248,252,.90); --kg-glass-border:rgba(115,95,138,.18); --kg-glass-border-2:rgba(115,95,138,.32);
  --kg-bg-glow-1:rgba(162,137,188,.27); --kg-bg-glow-2:rgba(215,201,228,.44); --kg-bg-glow-3:rgba(139,113,167,.22); --kg-icon-glow:rgba(115,95,138,.52);
}
:root[data-theme="rose"] {
  --kg-primary:#B77F83; --kg-primary-strong:#925D63; --kg-primary-deep:#70444B; --kg-primary-soft:#E0C2C3; --kg-primary-tint:#F4E5E5;
  --kg-bg:#F5E9E8; --kg-beige:#E9D6D4; --kg-sand:#D3AAA8; --kg-cream:#FCF8F6; --kg-cream-2:#F4EAE7; --kg-cream-3:#EDDFDC;
  --kg-ink:#3D3030; --kg-ink-2:#6E5553; --kg-ink-3:#9B817E;
  --kg-glass-bg:rgba(252,248,246,.70); --kg-glass-strong:rgba(252,248,246,.90); --kg-glass-border:rgba(146,93,99,.18); --kg-glass-border-2:rgba(146,93,99,.32);
  --kg-bg-glow-1:rgba(195,125,132,.26); --kg-bg-glow-2:rgba(233,194,192,.43); --kg-bg-glow-3:rgba(176,104,112,.20); --kg-icon-glow:rgba(146,93,99,.52);
}

/* Theme runtime: keep legacy page backgrounds and bitmap icon packs in sync. */
body {
  background-color: var(--kg-bg);
  background-image:
    radial-gradient(1100px 520px at 88% -8%, var(--kg-bg-glow-1), transparent 60%),
    radial-gradient(900px 480px at 0% 4%, var(--kg-bg-glow-2), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, var(--kg-bg-glow-3), transparent 60%);
  background-attachment: fixed;
}
:root[data-theme] .hero {
  background:
    radial-gradient(420px 260px at 90% 0%, var(--kg-bg-glow-1), transparent 60%),
    radial-gradient(360px 240px at 4% 100%, var(--kg-bg-glow-3), transparent 55%),
    linear-gradient(140deg, var(--kg-cream) 0%, var(--kg-bg) 55%, var(--kg-beige) 100%);
}

/* Additional profile palettes. */
:root[data-theme="pink"] {
  --kg-primary:#D17FA5;
  --kg-primary-strong:#A83D71;
  --kg-primary-deep:#74254C;
  --kg-primary-soft:#EBC0D5;
  --kg-primary-tint:#F9DEEB;
  --kg-bg:#FFF0F6;
  --kg-beige:#EDD2DF;
  --kg-sand:#DDA1BF;
  --kg-cream:#FFFAFC;
  --kg-cream-2:#FBEAF2;
  --kg-cream-3:#F5DCE8;
  --kg-ink:#422534;
  --kg-ink-2:#71465C;
  --kg-ink-3:#896276;
  --kg-glass-bg:color-mix(in srgb, #FFFAFC 76%, transparent); --kg-glass-strong:color-mix(in srgb, #FFFAFC 94%, transparent);
  --kg-glass-border:color-mix(in srgb, #A83D71 18%, transparent); --kg-glass-border-2:color-mix(in srgb, #A83D71 32%, transparent);
  --kg-bg-glow-1:color-mix(in srgb, #D17FA5 28%, transparent); --kg-bg-glow-2:color-mix(in srgb, #EBC0D5 44%, transparent); --kg-bg-glow-3:color-mix(in srgb, #D17FA5 20%, transparent); --kg-icon-glow:color-mix(in srgb, #A83D71 50%, transparent);
}
:root[data-theme="mint"] {
  --kg-primary:#65A99B;
  --kg-primary-strong:#34776B;
  --kg-primary-deep:#24564D;
  --kg-primary-soft:#B8DFD3;
  --kg-primary-tint:#DDF3EA;
  --kg-bg:#ECF8F2;
  --kg-beige:#CFE8DD;
  --kg-sand:#96C7B6;
  --kg-cream:#F8FFFB;
  --kg-cream-2:#E7F5EE;
  --kg-cream-3:#D8EBE2;
  --kg-ink:#263C34;
  --kg-ink-2:#49695B;
  --kg-ink-3:#698575;
  --kg-glass-bg:color-mix(in srgb, #F8FFFB 76%, transparent); --kg-glass-strong:color-mix(in srgb, #F8FFFB 94%, transparent);
  --kg-glass-border:color-mix(in srgb, #34776B 18%, transparent); --kg-glass-border-2:color-mix(in srgb, #34776B 32%, transparent);
  --kg-bg-glow-1:color-mix(in srgb, #65A99B 28%, transparent); --kg-bg-glow-2:color-mix(in srgb, #B8DFD3 44%, transparent); --kg-bg-glow-3:color-mix(in srgb, #65A99B 20%, transparent); --kg-icon-glow:color-mix(in srgb, #34776B 50%, transparent);
}
:root[data-theme="sky"] {
  --kg-primary:#74A4D2;
  --kg-primary-strong:#386FA7;
  --kg-primary-deep:#244D78;
  --kg-primary-soft:#C2D9F0;
  --kg-primary-tint:#E1EFFC;
  --kg-bg:#EDF5FE;
  --kg-beige:#D0E2F5;
  --kg-sand:#A4C5E7;
  --kg-cream:#FAFCFF;
  --kg-cream-2:#E8F1FC;
  --kg-cream-3:#DCE8F6;
  --kg-ink:#27384C;
  --kg-ink-2:#4D6785;
  --kg-ink-3:#6C829B;
  --kg-glass-bg:color-mix(in srgb, #FAFCFF 76%, transparent); --kg-glass-strong:color-mix(in srgb, #FAFCFF 94%, transparent);
  --kg-glass-border:color-mix(in srgb, #386FA7 18%, transparent); --kg-glass-border-2:color-mix(in srgb, #386FA7 32%, transparent);
  --kg-bg-glow-1:color-mix(in srgb, #74A4D2 28%, transparent); --kg-bg-glow-2:color-mix(in srgb, #C2D9F0 44%, transparent); --kg-bg-glow-3:color-mix(in srgb, #74A4D2 20%, transparent); --kg-icon-glow:color-mix(in srgb, #386FA7 50%, transparent);
}