/* Masjid Ibrahim: the single source of raw values.
   Components use only these tokens. Light theme only. */

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* colour: one dark, opacity steps of it */
  --dark-rgb: 16 35 27;
  --color-dark: rgb(var(--dark-rgb));
  --color-bg: #f6f6f3;
  --color-surface: #ffffff;
  --color-text-primary: rgb(var(--dark-rgb) / 0.94);
  --color-text-body: rgb(var(--dark-rgb) / 0.86);
  --color-text-secondary: rgb(var(--dark-rgb) / 0.76);
  --color-text-muted: rgb(var(--dark-rgb) / 0.68);
  --color-border-strong: rgb(var(--dark-rgb) / 0.5);
  --color-border: rgb(var(--dark-rgb) / 0.12);
  --color-border-soft: rgb(var(--dark-rgb) / 0.07);
  --color-surface-tint: rgb(var(--dark-rgb) / 0.04);
  --color-surface-tag: rgb(var(--dark-rgb) / 0.07);
  --color-scrim: rgb(var(--dark-rgb) / 0.5);
  --color-shadow: rgb(var(--dark-rgb) / 0.14);
  --color-on-dark: #ffffff;
  --color-on-dark-secondary: rgb(255 255 255 / 0.78);
  --color-on-dark-border: rgb(255 255 255 / 0.18);
  --color-in-on-dark: #8fe0b4;
  --color-out-on-dark: #ffb4a8;

  /* meaning: money in, money out (always paired with a sign and an icon) */
  --color-in: #17714a;
  --color-in-tint: rgb(23 113 74 / 0.1);
  --color-out: #b42318;
  --color-out-tint: rgb(180 35 24 / 0.08);

  /* the one warm standout */
  --color-warm: #f2b632;
  --color-warm-tint: rgb(242 182 50 / 0.24);

  /* artwork: donation success screen */
  --success-bg: #e9f3ec;

  /* type */
  --font-sans: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', serif;
  --font-arabic: 'Geeza Pro', 'Noto Naskh Arabic', 'Segoe UI', serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --text-balance: clamp(2.125rem, 11vw, 2.75rem); --leading-balance: 3rem;
  --text-amount: 2.75rem;    --leading-amount: 3.25rem;
  --text-display: 1.75rem;   --leading-display: 2.125rem;
  --text-h1: 1.5rem;         --leading-h1: 1.875rem;
  --text-h2: 1.1875rem;      --leading-h2: 1.625rem;
  --text-h3: 1.0625rem;      --leading-h3: 1.5rem;
  --text-body: 1rem;         --leading-body: 1.5rem;
  --text-small: 0.875rem;    --leading-small: 1.25rem;
  --tracking-button: 0.01em;
  --leading-urdu: 2.1;
  --leading-urdu-tight: 1.9;

  /* space (base 4) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --gutter: var(--space-5);
  --section-gap: var(--space-6);
  --container: 35rem;
  --rail-width: 15rem;
  --nav-height: 4rem;
  --measure: 22rem;

  /* shape, depth */
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-sheet: 1.5rem;
  --radius-full: 999rem;
  --border-width: 0.0625rem;
  --focus-width: 0.1875rem;
  --shadow-float: 0 0.5rem 1.5rem var(--color-shadow);
  --btn-min: 9.75rem;
  --control-height: 3rem;
  --control-height-sm: 2.75rem;
  --icon-size: 1.25rem;
  --icon-circle: 2.5rem;
  --thumb: 4.5rem;
  --bar-height: 0.5rem;
  --check-size: 4rem;
  --emblem-size: 7rem;

  /* motion */
  --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 0.05, 0.15, 1);
  --rise: 1rem;
}

@media (min-width: 48rem) {
  :root {
    --text-balance: 3rem;  --leading-balance: 3.25rem;
    --text-h1: 1.75rem;    --leading-h1: 2.125rem;
    --gutter: var(--space-10);
    --container: 44rem;
  }
}