/* ============================================================
   Masjid-E-Hidayah Design System — bundled for the offline TV
   display. This is the project's styles.css with its six token
   files inlined into one file the board can link directly.
   Source: claude.ai/design "Masjid-E-Hidayah Design System".
   ============================================================ */

/* ---- Webfonts (Google Fonts; bundle TTFs for fully-offline) ---- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');

/* ============================================================
   Colour tokens
   ============================================================ */
:root {
  --green-50:  #f3f8f5;
  --green-100: #e8f1ec;
  --green-200: #cfe2d6;
  --green-300: #a9cdb6;
  --green-400: #75b48a;
  --green-500: #549065;
  --green-600: #426f4f;
  --green-700: #2f5039;

  --red-50:  #fdecec;
  --red-400: #ef4444;
  --red-500: #dd1515;
  --red-600: #b91212;

  --navy-500: #000080;

  --white:   #ffffff;
  --grey-50: #f7f9fa;
  --grey-100:#e7e7e7;
  --grey-200:#e7ebee;
  --grey-400:#9aa1a8;
  --grey-600:#7a828a;
  --ink-700: #3a434a;
  --ink-800: #232729;
  --ink-900: #11181c;
  --black:   #000000;

  --color-primary:        var(--green-400);
  --color-primary-strong: var(--green-500);
  --color-primary-deep:   var(--green-600);
  --color-secondary:      var(--red-500);

  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--grey-600);
  --text-emphasis:  var(--red-500);
  --text-on-green:  var(--white);
  --text-on-dark:   var(--white);

  --link:           var(--green-500);
  --link-hover:     var(--green-600);
  --link-emphasis:  var(--red-500);

  --surface-page:   var(--white);
  --surface-card:   var(--white);
  --surface-muted:  var(--grey-50);
  --surface-sage:   var(--green-100);
  --surface-footer: var(--grey-100);
  --surface-nav:    var(--green-400);

  --border-default: var(--grey-200);
  --border-strong:  var(--ink-800);
  --border-sage:    var(--green-200);

  --focus-ring:     var(--green-500);

  --state-success:  var(--green-500);
  --state-danger:   var(--red-500);
}

/* ============================================================
   Typography tokens
   ============================================================ */
:root {
  --font-sans:    'Roboto', Helvetica, Arial, sans-serif;
  --font-heading: 'Roboto', Helvetica, Arial, sans-serif;
  --font-arabic:  'Amiri', 'Scheherazade New', serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --fs-display: 43px;
  --fs-h1:      34px;
  --fs-h2:      23px;
  --fs-h3:      16px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-tiny:    11px;

  --lh-tight:   1.15;
  --lh-heading: 1.3;
  --lh-body:    1.5;

  --ls-normal:  0.1px;
  --ls-eyebrow: 2px;

  --text-display-size:  var(--fs-display);
  --text-h1-size:       var(--fs-h1);
  --text-h2-size:       var(--fs-h2);
  --text-h3-size:       var(--fs-h3);
  --text-body-size:     var(--fs-body);
}

/* ============================================================
   Spacing tokens
   ============================================================ */
:root {
  --space-base: 14px;
  --space-1: 4px;
  --space-2: 7px;
  --space-3: 14px;
  --space-4: 21px;
  --space-5: 28px;
  --space-6: 42px;
  --space-7: 56px;
  --space-8: 84px;
  --space-9: 112px;
  --container-max: 1180px;
  --content-max:   760px;
  --gutter:        var(--space-4);
}

/* ============================================================
   Effects: radii, borders, shadows, motion
   ============================================================ */
:root {
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-thick:    2px;

  --shadow-xs: 0 1px 2px rgba(35, 39, 41, 0.06);
  --shadow-sm: 0 1px 3px rgba(35, 39, 41, 0.08), 0 1px 2px rgba(35, 39, 41, 0.04);
  --shadow-md: 0 4px 14px rgba(35, 39, 41, 0.08);
  --shadow-lg: 0 10px 30px rgba(35, 39, 41, 0.10);

  --ring: 0 0 0 3px rgba(84, 144, 101, 0.35);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
}

/* ============================================================
   Base element styles & helpers
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); color: var(--text-emphasis); }

p { margin: 0 0 var(--space-3); }

::selection { background: var(--green-200); color: var(--ink-900); }

.u-arabic { font-family: var(--font-arabic); direction: rtl; line-height: 1.8; }
.u-eyebrow { text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: var(--fs-tiny); font-weight: var(--fw-medium); }