/* =============================================================================
   Sedra5 Theme: Beth Mardutho
   The default SEDRA theme — rich, academic, respectful of the tradition.
   All visual values are CSS custom properties applied to :root.
   To create a new theme, copy this file and change the values.
   ============================================================================= */

:root {

  /* -------------------------------------------------------------------------
     Typography
     ---------------------------------------------------------------------- */
  --font-ui:      'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans Syriac', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-syriac:  'Noto Sans Syriac', serif;  /* the Meltho faces are chosen per user (font menu) */

  --font-size-xs:    0.75rem;   /* 12px */
  --font-size-sm:    0.875rem;  /* 14px */
  --font-size-base:  1rem;      /* 16px */
  --font-size-lg:    1.125rem;  /* 18px */
  --font-size-xl:    1.25rem;   /* 20px */
  --font-size-2xl:   1.5rem;    /* 24px */
  --font-size-3xl:   1.875rem;  /* 30px */
  --font-size-4xl:   2.25rem;   /* 36px */

  /* Syriac font sizes — larger than UI text to compensate for glyph density */
  --font-size-syriac-xs:   1rem;
  --font-size-syriac-sm:   1.125rem;
  --font-size-syriac-base: 1.25rem;
  --font-size-syriac-lg:   1.5rem;
  --font-size-syriac-xl:   1.875rem;
  --font-size-syriac-2xl:  2.25rem;
  --font-size-syriac-3xl:  2.75rem;
  --font-size-syriac-4xl:  3.5rem;

  --font-weight-heading: 700;
  --line-height-base:    1.65;
  --line-height-heading: 1.2;
  --line-height-syriac:  1.9;
  --line-height-syriac-vocalized: 2.3;

  /* -------------------------------------------------------------------------
     Colour Palette — Beth Mardutho
     Deep burgundy + warm parchment + gold accents
     ---------------------------------------------------------------------- */

  /* Base palette (not used directly — see semantic tokens below) */
  --palette-burgundy-900: #3d0c17;
  --palette-burgundy-800: #5c1628;
  --palette-burgundy-700: #7a1f38;
  --palette-burgundy-600: #8f2540;
  --palette-burgundy-500: #a8304f;
  --palette-burgundy-100: #f9e8ec;
  --palette-burgundy-50:  #fdf4f6;

  --palette-gold-700:     #7c5c0a;
  --palette-gold-600:     #9b7213;
  --palette-gold-500:     #b8870f;
  --palette-gold-400:     #d4a520;
  --palette-gold-100:     #fdf3d0;

  --palette-parchment:    #fdf8f0;
  --palette-parchment-dark: #f5ede0;

  --palette-gray-900:  #1a1a1a;
  --palette-gray-800:  #2d2d2d;
  --palette-gray-600:  #555;
  --palette-gray-400:  #888;
  --palette-gray-200:  #e0e0e0;
  --palette-gray-100:  #f5f5f5;
  --palette-white:     #ffffff;

  /* -------------------------------------------------------------------------
     Spacing Scale (4px base unit)
     ---------------------------------------------------------------------- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* -------------------------------------------------------------------------
     Border Radius
     ---------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
     Shadows
     ---------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.14);
  --shadow-nav: 0 2px 8px rgba(0,0,0,0.25);

  /* -------------------------------------------------------------------------
     Layout
     ---------------------------------------------------------------------- */
  --content-max-width:        1200px;
  --content-max-width-wide:   1600px;
  --content-max-width-narrow:  720px;
}

/* =============================================================================
   Colour schemes
   ---------------------------------------------------------------------------
   Dark is the default. The choice is stored per browser (localStorage
   "sedra5_theme") and applied to <html data-theme> by a one-line script in
   every page's <head>, before any CSS paints, so there is no flash of the
   wrong scheme. The toggle lives in the site header (js/shell.js).
   ============================================================================= */

/* ---- Dark (default) ---------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:            #161013;
  --color-surface:       #1f171b;
  --color-surface-alt:   #291e23;

  --color-text:          #efe6e9;
  --color-text-muted:    #b3a0a7;
  --color-text-inverse:  #161013;

  --color-primary:        #b8405f;
  --color-primary-hover:  #cc5575;
  --color-primary-text:   #ffffff;
  --color-primary-light:  #3a1a25;

  --color-link:           #eb9db2;
  --color-link-hover:     #f6c2d0;

  --color-border:         #3b2b32;
  --color-border-focus:   var(--palette-gold-400);

  --color-nav-bg:         var(--palette-burgundy-800);
  --color-nav-text:       #ffffff;
  --color-nav-item-hover: rgba(255,255,255,0.12);
  --nav-border-bottom:    3px solid var(--palette-gold-500);
  --nav-height:           60px;

  --color-hero-bg:        #2a0a12;
  --color-hero-text:      #ffffff;

  --color-badge-bg:       #3a1a25;
  --color-badge-text:     #f3b8c6;

  --color-table-header-bg:   #2d1219;
  --color-table-header-text: #f5e9ec;
  --color-table-row-hover:   #2a1d23;

  --color-footer-bg:      #0f0b0d;
  --color-footer-text:    #a3939a;
  --color-footer-heading: #efe6e9;
  --color-footer-link:    #bcaab1;
  --color-footer-border:  #2a1f24;

  --color-success:        #62cf91;
  --color-success-bg:     #13291d;
  --color-warning:        #e6bc45;
  --color-warning-bg:     #2e2410;
  --color-error:          #f2826f;
  --color-error-bg:       #34161a;
  --color-info:           #7db1f2;
  --color-info-bg:        #122238;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.45);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.55);
}

/* ---- Light ------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  /* Page background */
  --color-bg:            var(--palette-parchment);
  --color-surface:       var(--palette-white);
  --color-surface-alt:   var(--palette-gray-100);

  /* Text */
  --color-text:          var(--palette-gray-900);
  --color-text-muted:    var(--palette-gray-600);
  --color-text-inverse:  var(--palette-white);

  /* Primary accent (burgundy) */
  --color-primary:        var(--palette-burgundy-700);
  --color-primary-hover:  var(--palette-burgundy-600);
  --color-primary-text:   var(--palette-white);
  --color-primary-light:  var(--palette-burgundy-100);

  /* Links */
  --color-link:           var(--palette-burgundy-700);
  --color-link-hover:     var(--palette-burgundy-500);

  /* Borders */
  --color-border:         var(--palette-gray-200);
  --color-border-focus:   var(--palette-burgundy-500);

  /* Navigation */
  --color-nav-bg:         var(--palette-burgundy-800);
  --color-nav-text:       var(--palette-white);
  --color-nav-item-hover: rgba(255,255,255,0.12);
  --nav-border-bottom:    3px solid var(--palette-gold-500);
  --nav-height:           60px;

  /* Hero section */
  --color-hero-bg:        var(--palette-burgundy-900);
  --color-hero-text:      var(--palette-white);

  /* Badges */
  --color-badge-bg:       var(--palette-burgundy-100);
  --color-badge-text:     var(--palette-burgundy-700);

  /* Table */
  --color-table-header-bg:   var(--palette-burgundy-800);
  --color-table-header-text: var(--palette-white);
  --color-table-row-hover:   var(--palette-parchment-dark);

  /* Footer */
  --color-footer-bg:      var(--palette-gray-900);
  --color-footer-text:    var(--palette-gray-400);
  --color-footer-heading: var(--palette-white);
  --color-footer-link:    var(--palette-gray-400);
  --color-footer-border:  var(--palette-gray-800);

  /* Status colours */
  --color-success:        #2d7a4f;
  --color-success-bg:     #e8f5ee;
  --color-warning:        #926c00;
  --color-warning-bg:     #fff8e1;
  --color-error:          #c0392b;
  --color-error-bg:       #fdf0ef;
  --color-info:           #1d5fa8;
  --color-info-bg:        #e8f1fb;
}