/* ==========================================================================
   tokens.css — DGA design tokens (Saudi Digital Government Authority)
   Daily Funerals Register — the Prophet's Mosque
   --------------------------------------------------------------------------
   Layer 1: raw ramps + scales (never referenced by components directly,
            except the ramps needed for status colours).
   Layer 2: semantic tokens (--bg, --surface, --text, --brand …).
            Components reference ONLY these.
   Theme resolution order (last one wins):
     1. :root                                   → light defaults
     2. @media (prefers-color-scheme: dark)     → follows the device,
        scoped to :root:not([data-theme])          ONLY when no manual choice
     3. :root[data-theme="dark"|"light"]        → manual toggle, always wins
   ========================================================================== */

/* ==========================================================================
   FONT — IBM Plex Sans Arabic, self-hosted (SIL OFL)
   Files live in ../fonts/ and may not exist yet; font-display:swap plus the
   fallback stack below means the app renders correctly without them.
   Two declarations per weight: the Arabic block, and the Latin block so that
   Western digits (1, 2, 99, 412) match the Arabic text metrically.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+FD3E-FD3F,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+FD3E-FD3F,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+FD3E-FD3F,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+FD3E-FD3F,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   LAYER 1 — RAW TOKENS (theme-independent)
   ========================================================================== */

:root {
  /* ---- Primary — Saudi green ------------------------------------------ */
  --primary-25:  #f7fdf9;
  --primary-50:  #f3fcf6;
  --primary-100: #dff6e7;
  --primary-200: #b8eacb;
  --primary-300: #88d8ad;
  --primary-400: #54c08a;
  --primary-500: #25935f;
  --primary-600: #1b8354;   /* main brand */
  --primary-700: #166a45;
  --primary-800: #14573a;
  --primary-900: #104631;
  --primary-950: #092a1e;

  /* ---- Secondary — gold ----------------------------------------------- */
  /* Base sampled from https://sso.alharamain.gov.sa/login (2026-10-20).
     Companion shades are local adaptations for surfaces and contrast. */
  --secondary-25:  #fdfbf8;
  --secondary-50:  #faf6ef;
  --secondary-100: #f2e8d8;
  --secondary-200: #e6d4b7;
  --secondary-300: #d4b889;
  --secondary-400: #c5a371;
  --secondary-500: #b6925a;
  --secondary-600: #967440;
  --secondary-700: #806238;
  --secondary-800: #644c2e;
  --secondary-900: #453622;
  --secondary-950: #2d251b;

  --gold: var(--secondary-500);
  --gold-text: var(--secondary-700);
  --gold-subtle: var(--secondary-50);
  --gold-border: var(--secondary-200);

  /* ---- Neutral --------------------------------------------------------- */
  --neutral-25:  #fcfcfd;
  --neutral-50:  #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d2d6db;
  --neutral-400: #9da4ae;
  --neutral-500: #6c727e;
  --neutral-600: #4d5761;
  --neutral-700: #384250;
  --neutral-800: #1f2a37;
  --neutral-900: #111927;
  --neutral-950: #0c111b;
  --neutral-black: #161616;
  --neutral-white: #ffffff;

  /* ---- Status ---------------------------------------------------------- */
  --success-50:  #ecfdf3;
  --success-100: #dcfae6;
  --success-500: #17b169;
  --success-600: #069454;
  --success-700: #067647;

  --warning-50:  #fffaeb;
  --warning-100: #fef0c7;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54707;

  --error-50:  #fef3f2;
  --error-100: #fee4e2;
  --error-500: #f04437;
  --error-600: #d92c20;
  --error-700: #b42318;

  --info-50:  #eff8ff;
  --info-100: #d1e9ff;
  --info-500: #2e90fa;
  --info-600: #156fee;
  --info-700: #175cd3;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "IBM Plex Sans Arabic", system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas,
               "Liberation Mono", monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ---- Spacing — 4px scale --------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*   4 */
  --space-2:  0.5rem;   /*   8 */
  --space-3:  0.75rem;  /*  12 */
  --space-4:  1rem;     /*  16 */
  --space-5:  1.25rem;  /*  20 */
  --space-6:  1.5rem;   /*  24 */
  --space-8:  2rem;     /*  32 */
  --space-10: 2.5rem;   /*  40 */
  --space-12: 3rem;     /*  48 */
  --space-16: 4rem;     /*  64 */
  --space-20: 5rem;     /*  80 */
  --space-24: 6rem;     /*  96 */
  --space-32: 8rem;     /* 128 */

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --tap-min: 44px;              /* minimum tap target, PLAN §6 */
  --tabbar-height: 60px;
  --topbar-height: 64px;

  /* CRM shell — the sidebar is a grid column, so these are its two widths.
     ≥1024px it shows labels; 640–1023px it collapses to an icon rail. */
  --sidebar-width: 260px;
  --sidebar-rail: 64px;
  /* Height of .page-header — also the offset a sticky element beneath it
     (a data-table head, the live summary panel) has to clear. */
  --page-header-height: 68px;
  --drawer-width: 460px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Z-index scale ---------------------------------------------------- */
  --z-sticky: 100;
  --z-sidebar: 150;
  --z-tabbar: 200;
  --z-overlay: 300;
  --z-sheet: 310;
  --z-toast: 400;
}

/* ==========================================================================
   LAYER 2 — SEMANTIC TOKENS
   ========================================================================== */

/* ---- LIGHT (default) ---------------------------------------------------- */
:root {
  color-scheme: light;

  --bg:             #f9fafb;   /* neutral-50  */
  --surface:        #ffffff;   /* white       */
  --surface-raised: #f9fafb;   /* neutral-50  */
  --surface-sunken: #f3f4f6;   /* neutral-100 */
  --border:         #e5e7eb;   /* neutral-200 */
  --border-strong:  #d2d6db;   /* neutral-300 */
  --text:           #111927;   /* neutral-900 */
  --text-muted:     #6c727e;   /* neutral-500 */
  --text-subtle:    #9da4ae;   /* neutral-400 */
  --text-on-brand:  #ffffff;

  --brand:          #1b8354;   /* primary-600 — constant across themes */
  --brand-hover:    #166a45;   /* primary-700 */
  --brand-pressed:  #104631;   /* primary-900 */
  --brand-subtle:   #f3fcf6;   /* primary-50  — tinted background */
  --chip:           #dff6e7;   /* primary-100 */
  --chip-text:      #14573a;   /* primary-800 */
  --indicator:      #1b8354;   /* primary-600 */
  --focus-ring:     #1b8354;   /* primary-600 */

  --accent:         #b87b02;   /* secondary-700 — gold, legible on light */
  --accent-subtle:  #fffce6;   /* secondary-100 */

  --success:        #069454;
  --success-bg:     #ecfdf3;
  --success-text:   #067647;
  --warning:        #dc6803;
  --warning-bg:     #fffaeb;
  --warning-text:   #b54707;
  --danger:         #d92c20;
  --danger-hover:   #b42318;
  /* The solid button: a background that white text can stand on at AA. In
     the light theme that is --danger itself (4.85:1); in dark it is pinned
     here rather than lightening to error-500, because white on #f04437
     fails at 3.76:1. --danger stays for borders and icons. */
  --danger-solid:       #d92c20;
  --danger-solid-hover: #b42318;
  --danger-bg:      #fef3f2;
  --danger-text:    #b42318;
  --info:           #156fee;
  --info-bg:        #eff8ff;
  --info-text:      #175cd3;

  --overlay: rgba(16, 24, 40, 0.55);

  --shadow-xs:  0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:  0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md:  0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg:  0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl:  0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0 32px 64px -12px rgba(16, 24, 40, 0.14);
}

/* ---- DARK — device preference, only when no manual choice is stored ------
   :root:not([data-theme]) means the moment JS writes data-theme="light" or
   "dark" on <html>, this whole block stops matching. The manual toggle wins
   by not competing at all, rather than by out-specifying. ------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg:             #0c111b;   /* neutral-950 */
    --surface:        #111927;   /* neutral-900 */
    --surface-raised: #1f2a37;   /* neutral-800 */
    --surface-sunken: #0c111b;   /* neutral-950 */
    --border:         #384250;   /* neutral-700 */
    --border-strong:  #4d5761;   /* neutral-600 */
    --text:           #f9fafb;   /* neutral-50  */
    --text-muted:     #9da4ae;   /* neutral-400 */
    --text-subtle:    #6c727e;   /* neutral-500 */
    --text-on-brand:  #ffffff;

    --brand:          #1b8354;   /* primary-600 — unchanged */
    --brand-hover:    #25935f;   /* primary-500 — lighter on dark */
    --brand-pressed:  #166a45;   /* primary-700 */
    --brand-subtle:   #104631;   /* primary-900 */
    --chip:           #104631;   /* primary-900 */
    --chip-text:      #b8eacb;   /* primary-200 */
    --indicator:      #54c08a;   /* primary-400 */
    --focus-ring:     #54c08a;   /* primary-400 */

    --accent:         #f7d54d;   /* secondary-400 — gold, lighter on dark */
    --accent-subtle:  #472400;   /* secondary-950 */

    --success:        #17b169;
    --success-bg:     #14573a;
    --success-text:   #dcfae6;
    --warning:        #f79009;
    --warning-bg:     #6e3c00;
    --warning-text:   #fef0c7;
    --danger:         #f04437;
    --danger-hover:   #d92c20;
    --danger-solid:       #d92c20;
    --danger-solid-hover: #b42318;
    --danger-bg:      #542019;
    --danger-text:    #fee4e2;
    --info:           #2e90fa;
    --info-bg:        #10365e;
    --info-text:      #d1e9ff;

    --overlay: rgba(0, 0, 0, 0.66);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.48), 0 1px 2px rgba(0, 0, 0, 0.36);
    --shadow-md:  0 4px 8px -2px rgba(0, 0, 0, 0.52), 0 2px 4px -2px rgba(0, 0, 0, 0.38);
    --shadow-lg:  0 12px 16px -4px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
    --shadow-xl:  0 20px 24px -4px rgba(0, 0, 0, 0.58), 0 8px 8px -4px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
    --shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.70);
  }
}

/* ---- DARK — explicit manual choice --------------------------------------
   Identical values. Declared separately (and last) so that data-theme="dark"
   applies on a light device, and so the media block above can be skipped
   entirely when a preference is stored. ------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #0c111b;
  --surface:        #111927;
  --surface-raised: #1f2a37;
  --surface-sunken: #0c111b;
  --border:         #384250;
  --border-strong:  #4d5761;
  --text:           #f9fafb;
  --text-muted:     #9da4ae;
  --text-subtle:    #6c727e;
  --text-on-brand:  #ffffff;

  --brand:          #1b8354;
  --brand-hover:    #25935f;
  --brand-pressed:  #166a45;
  --brand-subtle:   #104631;
  --chip:           #104631;
  --chip-text:      #b8eacb;
  --indicator:      #54c08a;
  --focus-ring:     #54c08a;

  --accent:         #f7d54d;
  --accent-subtle:  #472400;

  --success:        #17b169;
  --success-bg:     #14573a;
  --success-text:   #dcfae6;
  --warning:        #f79009;
  --warning-bg:     #6e3c00;
  --warning-text:   #fef0c7;
  --danger:         #f04437;
  --danger-hover:   #d92c20;
  --danger-solid:       #d92c20;
  --danger-solid-hover: #b42318;
  --danger-bg:      #542019;
  --danger-text:    #fee4e2;
  --info:           #2e90fa;
  --info-bg:        #10365e;
  --info-text:      #d1e9ff;

  --overlay: rgba(0, 0, 0, 0.66);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.48), 0 1px 2px rgba(0, 0, 0, 0.36);
  --shadow-md:  0 4px 8px -2px rgba(0, 0, 0, 0.52), 0 2px 4px -2px rgba(0, 0, 0, 0.38);
  --shadow-lg:  0 12px 16px -4px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
  --shadow-xl:  0 20px 24px -4px rgba(0, 0, 0, 0.58), 0 8px 8px -4px rgba(0, 0, 0, 0.35);
  --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
  --shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.70);
}

/* ---- LIGHT — explicit manual choice --------------------------------------
   The :root light block above already holds these values, and the dark media
   query is scoped away by :not([data-theme]). This block is a safety net so
   data-theme="light" is unambiguous even if the media scope is ever loosened.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:             #f9fafb;
  --surface:        #ffffff;
  --surface-raised: #f9fafb;
  --surface-sunken: #f3f4f6;
  --border:         #e5e7eb;
  --border-strong:  #d2d6db;
  --text:           #111927;
  --text-muted:     #6c727e;
  --text-subtle:    #9da4ae;
  --text-on-brand:  #ffffff;

  --brand:          #1b8354;
  --brand-hover:    #166a45;
  --brand-pressed:  #104631;
  --brand-subtle:   #f3fcf6;
  --chip:           #dff6e7;
  --chip-text:      #14573a;
  --indicator:      #1b8354;
  --focus-ring:     #1b8354;

  --accent:         #b87b02;
  --accent-subtle:  #fffce6;

  --success:        #069454;
  --success-bg:     #ecfdf3;
  --success-text:   #067647;
  --warning:        #dc6803;
  --warning-bg:     #fffaeb;
  --warning-text:   #b54707;
  --danger:         #d92c20;
  --danger-hover:   #b42318;
  --danger-solid:       #d92c20;
  --danger-solid-hover: #b42318;
  --danger-bg:      #fef3f2;
  --danger-text:    #b42318;
  --info:           #156fee;
  --info-bg:        #eff8ff;
  --info-text:      #175cd3;

  --overlay: rgba(16, 24, 40, 0.55);

  --shadow-xs:  0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:  0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md:  0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg:  0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl:  0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0 32px 64px -12px rgba(16, 24, 40, 0.14);
}