/* Hisn web theme */
/* Font loading lives in fonts.css, so it is not repeated here. */

:root {
  /* Color */
  --hisn-deep: #022C33;
  --hisn-deep-2: #04424C;
  --hisn-teal: #03606D;
  --hisn-glow: #0B5E66;
  --hisn-green: #0E8B6B;
  --hisn-emerald: #2DB98A;
  --hisn-emerald-dark: #17806F;
  --hisn-mint: #5FD4AA;          /* accents only, never body text on light */
  --hisn-mint-hover: #8DE3C4;
  --hisn-mint-line: rgba(95,212,170,0.35);
  --hisn-box: #EDF4F2;
  --hisn-page: #F7FAF9;
  --hisn-white: #FFFFFF;
  --hisn-ink: #1F3A40;           /* body on light */
  --hisn-ink-soft: #CFE3DF;      /* body on dark */
  --hisn-grey: #6B7F82;

  /* Gradients */
  --hisn-bg-radial: radial-gradient(ellipse 70% 65% at 50% 45%, #0B5E66 0%, #04424C 55%, #022C33 100%);
  --hisn-mark-gradient: linear-gradient(135deg, #5FD4AA 0%, #2DB98A 50%, #17806F 100%);
  --hisn-hairline: linear-gradient(to left, #5FD4AA, #03606D);

  /* Type */
  --hisn-font: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --fs-display: clamp(32px, 4.3vw, 62px);  /* teaser phrase, lh 1.45 */
  --fs-h1: clamp(28px, 3vw, 44px);
  --fs-h2: clamp(22px, 2.2vw, 32px);
  --fs-h3: 20px;
  --fs-body: 17px;                          /* lh 1.8 */
  --fs-small: 14px;
  --lh-display: 1.45; --lh-body: 1.8;

  /* Spacing (8px scale) */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px; --sp-9: 72px; --sp-12: 96px;
  --container: 1200px;
  --gutter: clamp(24px, 5vw, 72px);

  /* Shape */
  --radius: 0px;                 /* square corners: brand is built on squares */
  --border: 1px solid var(--hisn-mint-line);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 200ms; --dur: 400ms; --dur-phrase: 600ms;
  --phrase-interval: 4000ms;
}

html { direction: rtl; }
body { margin: 0; font-family: var(--hisn-font); color: var(--hisn-white); background: var(--hisn-deep); }
a { color: var(--hisn-mint); text-decoration: none; }
a:hover { color: var(--hisn-white); text-decoration: underline; }

.hisn-btn { background: var(--hisn-mint); color: var(--hisn-deep); font: 700 16px/1 var(--hisn-font); border: 0; border-radius: var(--radius); padding: 18px 30px; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.hisn-btn:hover { background: var(--hisn-mint-hover); }
.hisn-input { background: rgba(2,44,51,0.55); border: var(--border); color: #fff; font: 400 16px var(--hisn-font); padding: 18px 20px; border-radius: var(--radius); }
.hisn-input::placeholder { color: #7FA7A3; }
.hisn-crenellation { height: 18px; background: repeating-linear-gradient(to left, var(--hisn-mint) 0 36px, transparent 36px 72px); }
.hisn-grid-bg { background-image: linear-gradient(rgba(95,212,170,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(95,212,170,.045) 1px, transparent 1px); background-size: 72px 72px; }
.hisn-phrase { transition: opacity var(--dur-phrase) ease, transform var(--dur-phrase) ease; }
.hisn-phrase.is-out { opacity: 0; transform: translateY(14px); }