/* ============================================================================
   القضاء الإداري — design tokens

   One source of truth for colour, type, space, radius, shadow and motion.
   Nothing below this file may invent a raw hex, a random margin or a one-off
   duration; components compose these tokens instead.

   The palette follows the "book brown + page amber" direction: a deep ink
   navy-black for text, warm paper grounds that recall the scanned original,
   and a single bronze accent used sparingly for emphasis and wayfinding.
   There is no second accent hue — hierarchy comes from weight, size and space.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- ground & surface ------------------------------------------------ */
  --bg:            #f4f1ea;   /* the desk the page rests on                 */
  --surface:       #fffdf9;   /* the page itself                            */
  --surface-2:     #faf7f0;   /* quiet panels: sidebars, toolbars           */
  --surface-3:     #f0ece2;   /* inset wells, table stripes                 */
  --surface-over:  #fffdf9;   /* popovers, dialogs, dropdowns               */

  /* ---- ink -------------------------------------------------------------- */
  --ink:           #16181d;   /* body text            — 15.8:1 on --surface */
  --ink-2:         #4a4e57;   /* secondary            —  8.1:1              */
  --ink-3:         #6d7079;   /* metadata, captions   —  5.2:1              */
  --ink-on-accent: #fffdf9;

  /* ---- accent: bronze, used sparingly ----------------------------------- */
  --accent:        #8a5a20;   /* 5.4:1 on --surface — safe for body-size text */
  --accent-strong: #6d4617;
  --accent-weak:   color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 28%, transparent);

  /* ---- authority navy: the institutional voice --------------------------- */
  --navy:          #1a2438;
  --navy-2:        #263149;
  --on-navy:       #eae4d7;
  --on-navy-2:     #a8b0c0;

  /* ---- rules ------------------------------------------------------------ */
  --line:          #ddd6c7;
  --line-soft:     #ece6d9;
  --line-strong:   #c8bfab;

  /* ---- status (never colour alone — always paired with icon or text) ----- */
  --ok:            #2f6b45;
  --warn:          #8a6212;
  --danger:        #9c3026;
  --ok-weak:       color-mix(in srgb, var(--ok) 10%, transparent);
  --warn-weak:     color-mix(in srgb, var(--warn) 12%, transparent);
  --danger-weak:   color-mix(in srgb, var(--danger) 10%, transparent);

  /* ---- search highlight -------------------------------------------------- */
  --mark:          #f6dd9a;
  --mark-live:     #f0b64a;
  --mark-ink:      #3a2c08;

  /* ---- typeface ---------------------------------------------------------- */
  --font-read: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', 'Al Bayan', serif;
  --font-ui:   'IBM Plex Sans Arabic', 'SF Arabic', system-ui, -apple-system, sans-serif;
  --font-num:  'IBM Plex Sans Arabic', ui-monospace, 'SF Mono', monospace;

  /* ---- type scale -------------------------------------------------------- */
  /* --fscale is the reader's own zoom; it multiplies reading sizes only, so
     the interface never grows out of its layout when a reader enlarges text. */
  --fscale: 1;

  --fs-display: clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem);
  --fs-title:   clamp(1.65rem, 1.2rem + 1.9vw, 2.35rem);
  --fs-h1:      clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem);
  --fs-h2:      clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  --fs-h3:      1.1rem;
  --fs-h4:      1rem;
  --fs-lg:      1.0625rem;
  --fs-md:      .9375rem;   /* interface default */
  --fs-sm:      .875rem;
  --fs-xs:      .8125rem;
  --fs-2xs:     .75rem;

  /* reading sizes answer to --fscale */
  --fs-read:      calc(1.1875rem * var(--fscale));
  --fs-read-note: calc(.95rem   * var(--fscale));

  --lh-tight: 1.25;
  --lh-head:  1.4;
  --lh-ui:    1.6;
  --lh-read:  2.05;          /* overridden live by the reader's control */

  /* ---- space: 4px rhythm ------------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  /* ---- radius: restrained. This is a law library, not a SaaS console. ---- */
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;

  /* ---- elevation --------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(28,22,10,.05);
  --sh-2: 0 1px 3px rgba(28,22,10,.06), 0 6px 16px -6px rgba(28,22,10,.10);
  --sh-3: 0 2px 6px rgba(28,22,10,.07), 0 18px 40px -16px rgba(28,22,10,.16);
  --sh-4: 0 4px 12px rgba(28,22,10,.10), 0 32px 64px -24px rgba(28,22,10,.24);

  /* ---- motion ------------------------------------------------------------ */
  --dur-1: 120ms;  --dur-2: 180ms;  --dur-3: 260ms;  --dur-4: 380ms;
  --ease:      cubic-bezier(.2, 0, .2, 1);      /* arrive: decelerate        */
  --ease-out:  cubic-bezier(.4, 0, 1, 1);       /* leave: accelerate         */
  --ease-soft: cubic-bezier(.32, .72, 0, 1);

  /* ---- layout ------------------------------------------------------------ */
  --measure:    850px;       /* reading column, driven by the reader control */
  --shell-max:  1440px;
  --doc-max:    1180px;      /* document pages: a page, not a billboard      */
  --gutter:     clamp(var(--s-4), 4vw, var(--s-12));
  --header-h:   60px;
  --rail-w:     282px;

  /* ---- z-index scale ----------------------------------------------------- */
  --z-base: 0; --z-rail: 20; --z-header: 40; --z-scrim: 50;
  --z-panel: 60; --z-toast: 80; --z-present: 100;
}

/* ============================================================================
   Dark: a reading room at night, not an inverted page.

   Grounds are desaturated navy rather than black, body text is a warm off-white
   (never #fff, which glares against a dark ground), and the bronze accent is
   lightened until it clears 4.5:1 on its own surface rather than being reused
   from the light theme.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0f1218;
    --surface:      #161a22;
    --surface-2:    #1b2029;
    --surface-3:    #222834;
    --surface-over: #1d222c;

    --ink:          #e8e3d8;   /* 13.1:1 on --surface */
    --ink-2:        #b3b0a8;   /*  7.4:1 */
    --ink-3:        #8b8880;   /*  4.7:1 */
    --ink-on-accent:#12151b;

    --accent:       #d5a161;   /* 8.3:1 on --surface */
    --accent-strong:#e8bb82;
    --accent-weak:  color-mix(in srgb, var(--accent) 13%, transparent);
    --accent-line:  color-mix(in srgb, var(--accent) 34%, transparent);

    --navy:         #10141c;
    --navy-2:       #1a202b;
    --on-navy:      #e8e3d8;
    --on-navy-2:    #9aa0ad;

    --line:         #2e3440;
    --line-soft:    #242a34;
    --line-strong:  #414958;

    --ok:           #6fbb8c;
    --warn:         #d8ae55;
    --danger:       #e08a80;

    --mark:         #6a5624;
    --mark-live:    #9a7a2a;
    --mark-ink:     #fdf5e2;

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 1px 3px rgba(0,0,0,.45), 0 6px 16px -6px rgba(0,0,0,.5);
    --sh-3: 0 2px 6px rgba(0,0,0,.5),  0 18px 40px -16px rgba(0,0,0,.6);
    --sh-4: 0 4px 12px rgba(0,0,0,.55), 0 32px 64px -24px rgba(0,0,0,.7);
  }
}

/* the explicit toggle must win in both directions, so the dark values are
   declared a second time under the attribute rather than inherited */
:root[data-theme="dark"] {
  --bg:#0f1218; --surface:#161a22; --surface-2:#1b2029; --surface-3:#222834;
  --surface-over:#1d222c;
  --ink:#e8e3d8; --ink-2:#b3b0a8; --ink-3:#8b8880; --ink-on-accent:#12151b;
  --accent:#d5a161; --accent-strong:#e8bb82;
  --accent-weak: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  --navy:#10141c; --navy-2:#1a202b; --on-navy:#e8e3d8; --on-navy-2:#9aa0ad;
  --line:#2e3440; --line-soft:#242a34; --line-strong:#414958;
  --ok:#6fbb8c; --warn:#d8ae55; --danger:#e08a80;
  --mark:#6a5624; --mark-live:#9a7a2a; --mark-ink:#fdf5e2;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 3px rgba(0,0,0,.45), 0 6px 16px -6px rgba(0,0,0,.5);
  --sh-3: 0 2px 6px rgba(0,0,0,.5),  0 18px 40px -16px rgba(0,0,0,.6);
  --sh-4: 0 4px 12px rgba(0,0,0,.55), 0 32px 64px -24px rgba(0,0,0,.7);
}

/* Paper is paper. Print always resolves to the light palette, whatever the
   screen was set to, so a handout never prints a dark ground. */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg:#fff; --surface:#fff; --surface-2:#fff; --surface-3:#f4f4f4;
    --ink:#000; --ink-2:#222; --ink-3:#555;
    --accent:#000; --accent-strong:#000;
    --accent-weak: transparent; --accent-line:#999;
    --line:#999; --line-soft:#ccc; --line-strong:#666;
    --sh-1: none; --sh-2: none; --sh-3: none; --sh-4: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}