/*
 * חלק בקוד: theme/assets/css/tokens.css
 * טוקני העיצוב "Ledger" (מפרויקט lawsite-claude-2 §9): אספרסו + פליז על קרם, מרקם נייר, רדיוס 10px, צל רך,
 * Frank Ruhl Libre לכותרות, Assistant לגוף (line-height 1.75 לעברית), גריד 8 נק'.
 * כל רכיב ב-CSS של התבנית ושל התוסף קורא רק מכאן. אין hex בקומפוננטות.
 */

:root {
    /* Surfaces */
    --ls-color-bg:        #f3ecdd;
    --ls-color-bg-2:      #ece3cf;
    --ls-color-panel:     #fffdf7;
    --ls-color-panel-2:   #faf5ea;
    --ls-color-line:      #d3c5a5;
    --ls-color-line-soft: #e2d7bd;

    /* Text */
    --ls-color-ink:       #2a2114;
    --ls-color-ink-hover: #3a2e1c;
    --ls-color-muted:     #6d5c40;
    --ls-color-faint:     #98875f;

    /* Brass accents (gold darkened for WCAG AA on cream) */
    --ls-color-gold:        #8f6c27;
    --ls-color-gold-bright: #c79a3f;
    --ls-color-gold-dark:   #7c5c1d;

    /* Dark brand band (header top bar, footer, CTA band) */
    --ls-color-band-top:    #241b0e;
    --ls-color-band-bottom: #1a130a;
    --ls-color-band-text:   #f3e7c9;
    --ls-color-brand-title: #e9c97a;
    --ls-gradient-band: linear-gradient(180deg, var(--ls-color-band-top), var(--ls-color-band-bottom));

    /* Status */
    --ls-color-status-active:     #157a47; --ls-color-status-active-bg:  #e2f4e9;
    --ls-color-status-pending:    #7a5500; --ls-color-status-pending-bg: #faf0d2;
    --ls-color-status-waiting:    #8a3b12; --ls-color-status-waiting-bg: #fbe6d6;
    --ls-color-status-done:       #44566b; --ls-color-status-done-bg:    #e7edf4;
    --ls-color-error:             #9b2c2c; --ls-color-error-bg:          #fbe4e4;
    --ls-color-whatsapp:          #25d366;

    /* Typography */
    --ls-font-display: "Frank Ruhl Libre", "David Libre", Georgia, serif;
    --ls-font-body:    "Assistant", "Heebo", -apple-system, "Segoe UI", sans-serif;
    --ls-fs-display: clamp(34px, 4.2vw, 46px);
    --ls-fs-h1:      clamp(28px, 3.2vw, 36px);
    --ls-fs-h2:      clamp(22px, 2.4vw, 28px);
    --ls-fs-h3:      19px;
    --ls-fs-body:    17px;
    --ls-fs-small:   14px;
    --ls-fs-label:   12px;
    --ls-lh-tight: 1.2;
    --ls-lh-body:  1.75;
    --ls-ls-label: 0.08em;

    /* Spacing — 8pt grid */
    --ls-space-1: 4px;  --ls-space-2: 8px;  --ls-space-3: 12px; --ls-space-4: 16px;
    --ls-space-6: 24px; --ls-space-8: 32px; --ls-space-12: 48px; --ls-space-16: 64px;

    /* Character */
    --ls-radius-ledger: 10px;
    --ls-radius-pill:   999px;
    --ls-shadow-ledger: 0 8px 26px rgba(90, 70, 30, 0.16);
    --ls-shadow-soft:   0 2px 8px rgba(90, 70, 30, 0.10);
    --ls-border-card-top: 3px solid var(--ls-color-gold);
    --ls-container: 1200px;

    /* Page */
    --ls-page-bg:   var(--ls-color-bg);
    --ls-page-text: var(--ls-color-ink);

    /* Backward-compatible aliases for older selectors (navy era) */
    --ls-color-navy-deep:  var(--ls-color-ink);
    --ls-color-navy-ink:   var(--ls-color-band-bottom);
    --ls-color-cream-base: var(--ls-color-bg);
    --ls-color-cream-warm: var(--ls-color-bg-2);
    --ls-color-text-body:  var(--ls-color-ink);
    --ls-color-white:      var(--ls-color-panel);
    --ls-color-accent-red:       var(--ls-color-gold);
    --ls-color-accent-red-hover: var(--ls-color-gold-dark);
    --ls-border-radius: var(--ls-radius-ledger);
}

/* Map brand to Blocksy palette slots (parent CSS follows our colors). :root:root beats Blocksy's inline :root. */
:root:root {
    --theme-palette-color-1: var(--ls-color-gold);
    --theme-palette-color-2: var(--ls-color-gold-dark);
    --theme-palette-color-3: var(--ls-color-ink);
    --theme-palette-color-4: var(--ls-color-band-bottom);
    --theme-palette-color-5: var(--ls-color-panel-2);
    --theme-palette-color-6: var(--ls-color-bg-2);
    --theme-palette-color-7: var(--ls-color-panel);
    --theme-palette-color-8: var(--ls-color-bg);
    --theme-link-initial-color: var(--ls-color-gold-dark);
    --theme-link-hover-color: var(--ls-color-gold);
    --theme-button-background-initial-color: var(--ls-color-gold);
    --theme-button-background-hover-color: var(--ls-color-gold-dark);
    --theme-border-radius: var(--ls-radius-ledger);
}

html, body {
    background-color: var(--ls-page-bg);
    color: var(--ls-page-text);
}
body {
    position: relative;
    font-family: var(--ls-font-body);
    font-size: var(--ls-fs-body);
    line-height: var(--ls-lh-body);
}
/* Paper-grain overlay (~5%) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--ls-color-gold-dark); }
a:hover { color: var(--ls-color-gold); }
::selection { background: var(--ls-color-gold-bright); color: var(--ls-color-band-bottom); }

/* ----- Accessibility widget states (data-a11y-* on <html>) ----- */
html[data-a11y-font="1"] { font-size: 115%; }
html[data-a11y-font="2"] { font-size: 130%; }
html[data-a11y-font-family="readable"] body,
html[data-a11y-font-family="readable"] :is(h1, h2, h3, h4, h5, h6) { font-family: Arial, Helvetica, sans-serif !important; }
html[data-a11y-links="on"] a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; }
html[data-a11y-motion="reduced"] *, html[data-a11y-motion="reduced"] *::before, html[data-a11y-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html[data-a11y-cursor="big"], html[data-a11y-cursor="big"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l28 18-13 3-5 13z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto; }
html[data-a11y-contrast="on"] {
    --ls-color-bg: #ffffff; --ls-color-bg-2: #f2f2f2; --ls-color-panel: #ffffff; --ls-color-panel-2: #f7f7f7;
    --ls-color-line: #000000; --ls-color-line-soft: #333333; --ls-color-ink: #000000; --ls-color-ink-hover: #000000;
    --ls-color-muted: #1a1a1a; --ls-color-faint: #333333; --ls-color-gold: #6b4c00; --ls-color-gold-bright: #6b4c00; --ls-color-gold-dark: #4d3600;
    --ls-color-band-text: #ffffff; --ls-color-brand-title: #ffffff; --ls-gradient-band: linear-gradient(#000, #000);
}
html[data-a11y-contrast="on"] body::before { display: none; }
html[data-a11y-contrast="on"] img { filter: grayscale(30%) contrast(115%); }