/* ==========================================================================
   Minassati — design tokens
   Palette: forest green, warm ivory, terracotta and saffron.
   ========================================================================== */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/static/fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/static/fonts/cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --primary: #174c3f;
  --primary-600: #123b32;
  --primary-700: #0c3028;
  --primary-50: #edf5ef;
  --primary-100: #d9e9dd;
  --link: #174c3f;
  --link-hover: #0c3028;
  --sky: #8fb8a0;
  --deep: #123b32;
  --deep-2: #1d5949;
  --accent: #d96c4a;
  --accent-600: #c45738;
  --on-accent: #ffffff;

  /* Neutrals */
  --bg: #faf5e9;
  --surface: #fffdfa;
  --surface-2: #f2eddf;
  --border: #e5ddcc;
  --border-strong: #d3c7b0;
  --text: #1f2926;
  --muted: #5d6b65;
  --faint: #748079;
  --field-bg: #fffdfa;
  --row-hover: #f7f2e7;
  --glass: rgba(255, 253, 250, .91);
  --glass-strong: rgba(255, 253, 250, .97);
  --glass-bg: rgba(250, 245, 233, .9);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6982' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --sand: #faf5e9;
  --on-primary: #ffffff;
  --hl-a: #174c3f; --hl-b: #8fb8a0;         /* highlighted stat card gradient */
  --heading: #123b32;                      /* display headings on ivory */
  --hero-dim: rgba(18, 59, 50, 0);         /* veil over hero photos (dark mode dims them) */
  --photo-veil: 28%;                       /* how much --sand veils the auth photo */

  /* Semantic */
  --success: #0c7d55;
  --success-50: #e4f6ee;
  --danger: #b42318;
  --danger-50: #fdeceb;
  --warning: #8a5a00;
  --warning-50: #fff3cf;
  --success-solid: #0c7d55;  /* solid button / dot backgrounds (white text) */
  --danger-solid: #b42318;
  --danger-line: #f1c4c0;
  --alert-success-ink: #08553a; --alert-success-line: #bfe6d3;
  --alert-error-ink: #8f1d14;   --alert-error-line: #f4c8c4;
  --alert-info-ink: #063a8a;
  --alert-warning-ink: #6b4100; --alert-warning-line: #f4dba6;
  --t1-50: #fae9df; --t1-ink: #ad4d32;
  --t2-50: #e5f0e7; --t2-ink: #356d55;
  --info: var(--primary);
  --info-50: var(--primary-50);

  /* Category tints (cover fallbacks, progress). Decorative, not tied to a subject. */
  --t0-a: #174c3f; --t0-b: #7aa98c;
  --t1-a: #c85e3f; --t1-b: #e8a178;
  --t2-a: #416f5d; --t2-b: #a8bea9;
  --t3-a: #b27b18; --t3-b: #e8b44a;
  --t4-a: #263f37; --t4-b: #6c917c;

  /* Shape & depth */
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(31, 41, 38, .06);
  --shadow: 0 2px 3px rgba(31, 41, 38, .04), 0 10px 28px rgba(18, 59, 50, .08);
  --shadow-lg: 0 20px 54px rgba(18, 59, 50, .17);
  --ring: 0 0 0 3px rgba(232, 180, 74, .42);

  /* Type */
  --font: "Cairo", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1180px;
  --header-h: 68px;
  --sidebar-w: 272px;
  --gap: 20px;
}

/* ==========================================================================
   Dark theme (forest green). Applied when the visitor picked it (data-theme="dark")
   or, with no explicit choice, when the OS asks for it. data-theme="light" opts out.
   Every colour in the CSS comes from these tokens, so nothing else changes.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #69a987; --primary-600: #78b794; --primary-700: #a9d5ba;
    --primary-50: #18342b; --primary-100: #24483b;
    --link: #8fc9a6; --link-hover: #b7dec5; --sky: #8fb8a0;
    --deep: #0d2c25; --deep-2: #174c3f;
    --accent: #e18463; --accent-600: #ed9a7d; --on-accent: #1b211f; --on-primary: #0c221b; --hl-a: #1d5949; --hl-b: #2f7a62;
    --heading: #f4f1e6; --hero-dim: rgba(8, 20, 16, .38);

    --bg: #101b17; --surface: #17251f; --surface-2: #20332b;
    --border: #2d443a; --border-strong: #405d50;
    --text: #f1f3ed; --muted: #b6c3bc; --faint: #96a79f;
    --field-bg: #13201b; --row-hover: #1d3028;
    --glass: rgba(23, 37, 31, .9); --glass-strong: rgba(23, 37, 31, .97); --glass-bg: rgba(16, 27, 23, .9);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396a79f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --sand: #121f1a;
    --photo-veil: 62%;

    --success: #4cd39a; --success-50: #0f2c22;
    --danger: #ff8a80; --danger-50: #33161a; --danger-line: #5d2a2d;
    --warning: #efc45f; --warning-50: #352d14;
    --alert-success-ink: #8fe6c1; --alert-success-line: #1d5b43;
    --alert-error-ink: #ffb3ac;   --alert-error-line: #6a2c2f;
    --alert-info-ink: #b7dec5;
    --alert-warning-ink: #ffd894; --alert-warning-line: #66501f;
    --t1-50: #3c261e; --t1-ink: #f0a082; --t2-50: #17362b; --t2-ink: #8bc4a4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, .5);
    --ring: 0 0 0 3px rgba(232, 180, 74, .45);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #69a987; --primary-600: #78b794; --primary-700: #a9d5ba;
    --primary-50: #18342b; --primary-100: #24483b;
    --link: #8fc9a6; --link-hover: #b7dec5; --sky: #8fb8a0;
    --deep: #0d2c25; --deep-2: #174c3f;
    --accent: #e18463; --accent-600: #ed9a7d; --on-accent: #1b211f; --on-primary: #0c221b; --hl-a: #1d5949; --hl-b: #2f7a62;
    --heading: #f4f1e6; --hero-dim: rgba(8, 20, 16, .38);

    --bg: #101b17; --surface: #17251f; --surface-2: #20332b;
    --border: #2d443a; --border-strong: #405d50;
    --text: #f1f3ed; --muted: #b6c3bc; --faint: #96a79f;
    --field-bg: #13201b; --row-hover: #1d3028;
    --glass: rgba(23, 37, 31, .9); --glass-strong: rgba(23, 37, 31, .97); --glass-bg: rgba(16, 27, 23, .9);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396a79f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --sand: #121f1a;
    --photo-veil: 62%;

    --success: #4cd39a; --success-50: #0f2c22;
    --danger: #ff8a80; --danger-50: #33161a; --danger-line: #5d2a2d;
    --warning: #efc45f; --warning-50: #352d14;
    --alert-success-ink: #8fe6c1; --alert-success-line: #1d5b43;
    --alert-error-ink: #ffb3ac;   --alert-error-line: #6a2c2f;
    --alert-info-ink: #b7dec5;
    --alert-warning-ink: #ffd894; --alert-warning-line: #66501f;
    --t1-50: #3c261e; --t1-ink: #f0a082; --t2-50: #17362b; --t2-ink: #8bc4a4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, .5);
    --ring: 0 0 0 3px rgba(232, 180, 74, .45);
}