/* Islam Habits page skin: the liquid-glass style of the homepage.
   Reuses the homepage glass system in home.css and only re-tints its tokens with the Islam Habits
   logo greens: lime #8CF100 -> green, from ih-logo-color.svg and the app theme (Theme.kt). */

body.cd.ihg {
  --cd-grad: linear-gradient(135deg, #8cf100, #00b400);
  --grad-a: rgba(140, 241, 0, 0.85);
  --grad-b: rgba(0, 180, 0, 0.85);
  --grad-sheen: rgba(255, 255, 255, 0.45);
  --grad-glow: rgba(60, 160, 0, 0.3);
  --on-grad: #10200a; /* the app's onGreen: dark ink, since white on lime fails AA */

  --page-bg: #eef6ea;
  --text: #0f1d0c;
  --muted: #4a5d45;
  --heading: #0f1d0c;
  --link: #2f7a00;
  --focus: #2f9a00;
  --surface: #ffffff;
  --cast: rgba(20, 60, 0, 0.14);

  --glass-cast: rgba(20, 70, 0, 0.13);
  --glass-tint-a: rgba(140, 241, 0, 0.55);
  --glass-tint-b: rgba(0, 170, 0, 0.6);
  --aurora-a: rgba(140, 241, 0, 0.28);
  --aurora-b: rgba(0, 190, 0, 0.22);
  --aurora-c: rgba(0, 160, 120, 0.14);
}
:root[data-theme="dark"] body.cd.ihg {
  --cd-grad: linear-gradient(135deg, #4f8c00, #006400);
  --grad-a: rgba(79, 140, 0, 0.88);
  --grad-b: rgba(0, 100, 0, 0.88);
  --grad-sheen: rgba(255, 255, 255, 0.2);
  --grad-glow: rgba(0, 40, 0, 0.45);
  --on-grad: #ffffff;

  --page-bg: #08130a;
  --text: #e6f2e2;
  --muted: #a5b9a0;
  --heading: #f0f8ec;
  --link: #8cf100;
  --focus: #8cf100;
  --surface: #0f1f10;
  --cast: rgba(0, 0, 0, 0.45);

  --glass-cast: rgba(0, 0, 0, 0.45);
  --glass-tint-a: rgba(140, 241, 0, 0.4);
  --glass-tint-b: rgba(0, 200, 0, 0.5);
  --aurora-a: rgba(114, 200, 0, 0.3);
  --aurora-b: rgba(0, 150, 0, 0.36);
  --aurora-c: rgba(0, 120, 90, 0.2);
}
:root:has(body.ihg) { --sb-thumb: #bccbb6; --sb-thumb-hover: #97ab90; --theme-color: #eef6ea; background: #eef6ea; }
:root[data-theme="dark"]:has(body.ihg) { --sb-thumb: #2a3d2a; --sb-thumb-hover: #3a553a; --theme-color: #08130a; background: #08130a; }

/* Hairline edge picks up lime and green instead of the Coded Dreams green and blue */
.ihg .glass::before {
  background: linear-gradient(135deg, transparent 50%, var(--glass-tint-a) 75%, var(--glass-tint-b));
}

/* Ink on the tinted-glass surfaces */
.cd.ihg .btn.primary, .cd.ihg .nav a[aria-current="page"], .cd.ihg .icon-chip { color: var(--on-grad); }
:root[data-theme] .cd.ihg .theme-switch .sun { --gl: #10200a; --gm: #10200a; --gd: #10200a; --go: transparent; }
:root[data-theme] .cd.ihg .theme-switch .moon { --gl: #4a5d45; --gm: #4a5d45; --gd: #4a5d45; --go: transparent; }
:root[data-theme="dark"] .cd.ihg .theme-switch .sun { --gl: #a5b9a0; --gm: #a5b9a0; --gd: #a5b9a0; --go: transparent; }
:root[data-theme="dark"] .cd.ihg .theme-switch .moon { --gl: #ffffff; --gm: #ffffff; --gd: #e2f0dc; --go: transparent; }

/* Feature cards keep the Islam Habits page's body-font headings */
.cd.ihg .card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0; }

/* Join steps: numbers in tinted glass. The number badge is the li's ::before, so undo the
   .glass hairline that also lives there (these cards go without the edge). */
.ihg .steps li.glass::before {
  position: static; inset: auto; padding: 0; pointer-events: auto;
  -webkit-mask: none; mask: none;
  border-radius: 50%;
  color: var(--on-grad);
  background:
    linear-gradient(180deg, var(--grad-sheen), rgba(255, 255, 255, 0.04) 55%),
    linear-gradient(135deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 4px 12px var(--grad-glow);
}