/* ============================================================
   Gush Shalom — Colors & Type
   Drop-in design tokens for any HTML/CSS asset in this system.
   Source: gush-shalom.org, reconciled. Primary: #CC3366.
   Fonts: Roboto + Noto Sans (Google Fonts) — load via:
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans:wght@400;500;700&family=Noto+Sans+Hebrew:wght@400;500;700&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Base color tokens ---- */
  --color-primary:    #CC3366;   /* Crimson Rose — one primary, used sparingly */
  --color-secondary:  #D9534F;   /* Secondary red — alerts, danger */
  --color-ink:        #333333;   /* All body text & headings */
  --color-ink-muted:  #69727D;   /* Links, captions, secondary text */
  --color-border:     #CDCDCD;   /* Borders, dividers, input strokes */
  --color-surface:    #F7F7F7;   /* Off-white panels, card backgrounds */
  --color-canvas:     #FFFFFF;   /* Page background — always white */
  --color-dark:       #2D2D2D;   /* Button fills, footer ONLY */

  /* ---- Semantic status ---- */
  --color-error:      #D9534F;
  --color-success:    #5CB85C;
  --color-warning:    #F0AD4E;
  --color-info:       #5BC0DE;

  /* ---- Semantic color roles ---- */
  --fg-1:        var(--color-ink);        /* primary foreground */
  --fg-2:        var(--color-ink-muted);  /* secondary foreground */
  --fg-accent:   var(--color-primary);    /* accent — one per composition */
  --fg-on-dark:  #FFFFFF;
  --bg-1:        var(--color-canvas);
  --bg-2:        var(--color-surface);
  --bg-dark:     var(--color-dark);
  --stroke:      var(--color-border);
  --link:        var(--color-ink-muted);
  --link-hover:  var(--color-ink);

  /* ---- Base type tokens ---- */
  --font-sans:   'Roboto', 'Noto Sans', sans-serif;
  --font-rtl:    'Noto Sans Hebrew', 'Noto Sans', 'Roboto', sans-serif;

  --text-xs:     13px;     /* captions, metadata */
  --text-sm:     14.4px;   /* secondary body, labels */
  --text-base:   16px;     /* body */
  --text-lg:     20px;     /* lead paragraphs */
  --text-xl:     24px;     /* h3 */
  --text-2xl:    32px;     /* h2 */
  --text-3xl:    40px;     /* h1 */
  --text-4xl:    52px;     /* hero display */

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

  --leading-tight:  1.2;   /* headlines */
  --leading-base:   1.6;   /* body */
  --leading-loose:  1.7;   /* RTL body, captions */

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ---- Radius (sharp by default) ---- */
  --radius-none: 0px;   /* buttons, inputs */
  --radius-sm:   2px;   /* tags, badges */
  --radius-md:   4px;   /* cards, panels */
  --radius-lg:   8px;   /* modals, images */
  --radius-full: 9999px;

  /* ---- Shadow (functional only) ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);   /* sticky nav */
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10);  /* modal, dropdown */

  /* ---- Motion ---- */
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);

  /* ---- Layout ---- */
  --max-content: 1200px;
  --max-prose:   680px;

  /* ============================================================
     Semantic element vars — apply these directly to elements.
     ============================================================ */

  /* Hero display */
  --hero-size:   var(--text-4xl);
  --hero-weight: var(--weight-bold);
  --hero-leading: var(--leading-tight);

  /* h1 */
  --h1-size:    var(--text-3xl);
  --h1-weight:  var(--weight-bold);
  --h1-leading: var(--leading-tight);
  --h1-color:   var(--fg-1);

  /* h2 */
  --h2-size:    var(--text-2xl);
  --h2-weight:  var(--weight-bold);
  --h2-leading: var(--leading-tight);
  --h2-color:   var(--fg-1);

  /* h3 */
  --h3-size:    var(--text-xl);
  --h3-weight:  var(--weight-semibold);
  --h3-leading: var(--leading-tight);
  --h3-color:   var(--fg-1);

  /* lead paragraph */
  --lead-size:    var(--text-lg);
  --lead-weight:  var(--weight-normal);
  --lead-leading: var(--leading-base);
  --lead-color:   var(--fg-2);

  /* body paragraph */
  --p-size:    var(--text-base);
  --p-weight:  var(--weight-normal);
  --p-leading: var(--leading-base);
  --p-color:   var(--fg-1);

  /* overline (≤3 words, the only ALL CAPS allowed) */
  --overline-size:    var(--text-xs);
  --overline-weight:  var(--weight-bold);
  --overline-spacing: 0.08em;
  --overline-color:   var(--fg-accent);

  /* caption / metadata */
  --caption-size:    var(--text-xs);
  --caption-leading: var(--leading-loose);
  --caption-color:   var(--fg-2);

  /* UI label / nav */
  --label-size:   var(--text-sm);
  --label-weight: var(--weight-medium);
  --label-color:  var(--fg-2);
}

/* ============================================================
   Optional element defaults — opt in by importing this block,
   or copy the patterns into your own stylesheet.
   ============================================================ */

.gs-root {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}

.gs-root h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); color: var(--h1-color); }
.gs-root h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); color: var(--h2-color); }
.gs-root h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-leading); color: var(--h3-color); }
.gs-root p  { font-size: var(--p-size);  line-height: var(--p-leading); color: var(--p-color); }
.gs-root .lead { font-size: var(--lead-size); line-height: var(--lead-leading); color: var(--lead-color); }
.gs-root .overline {
  font-size: var(--overline-size); font-weight: var(--overline-weight);
  letter-spacing: var(--overline-spacing); text-transform: uppercase; color: var(--overline-color);
}
.gs-root .caption { font-size: var(--caption-size); line-height: var(--caption-leading); color: var(--caption-color); }

/* RTL: Hebrew / Arabic */
[dir="rtl"] {
  font-family: var(--font-rtl);
  line-height: var(--leading-loose);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}