/* ============================================================
   Shared foundation for all three design directions.
   Canvas/surface spine, girih ground, cursor reveal, tokens.
   Logical properties throughout — no left/right anywhere.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-inline-size: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---------- Tokens: the canvas/surface spine, formalised ----------
   canvas  = the patterned desk the site sits on
   surface = the calm reading plane that floats above it
   The RELATIONSHIP holds in both themes; only the values invert. */

:root {
  --tile: 300px;
  --measure: 68ch;
  --step--1: clamp(.82rem, .79rem + .12vw, .89rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + .72vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.9vw, 4.6rem);
  --step-5:  clamp(3rem, 2rem + 4.8vw, 6.5rem);
  --sp-1: .5rem;  --sp-2: .875rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4.5rem;  --sp-7: 7rem;
}

:root[data-theme="light"] {
  --canvas:      #DCD7CB;   /* warm stone */
  --canvas-deep: #CFC8B8;
  --surface:     #FBFAF8;   /* paper */
  --surface-2:   #F1EEE7;
  --ink-strong:  #14171A;
  --ink:         #34393E;
  --ink-muted:   #6B7176;
  --rule:        rgba(20,23,26,.14);
  --rule-soft:   rgba(20,23,26,.07);
  --accent:      #054239;   /* forest */
  --accent-ink:  #054239;
  --accent-soft: rgba(5,66,57,.09);
  --gold:        #8A6F3A;   /* wheat, darkened to hold contrast on paper */
  --pattern:     #054239;
  --pattern-op:  .10;
  --reveal:      #8A6F3A;
  --reveal-op:   .42;
  --shadow:      0 1px 2px rgba(20,23,26,.06), 0 12px 32px rgba(20,23,26,.10);
}

:root[data-theme="dark"] {
  --canvas:      #131518;
  --canvas-deep: #0D0F11;
  --surface:     #1B1E22;
  --surface-2:   #23272C;
  --ink-strong:  #F2F4F5;
  --ink:         #C6CCD1;
  --ink-muted:   #878E95;
  --rule:        rgba(255,255,255,.12);
  --rule-soft:   rgba(255,255,255,.06);
  --accent:      #5FAE99;   /* forest, lifted for dark */
  --accent-ink:  #7CC4B0;
  --accent-soft: rgba(95,174,153,.12);
  --gold:        #C6AE7D;   /* wheat, as drawn */
  --pattern:     #C6AE7D;
  --pattern-op:  .055;
  --reveal:      #C6AE7D;
  --reveal-op:   .40;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Girih ground ----------
   One SVG, used as a MASK so a single asset recolours per theme.
   Base layer sits at ~5-10%; the reveal layer is the same tile in
   wheat, masked a second time by a spotlight that follows the cursor. */

.ground, .ground__reveal {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ground {
  background: var(--pattern);
  opacity: var(--pattern-op);
  -webkit-mask-image: url(./girih.svg); mask-image: url(./girih.svg);
  -webkit-mask-repeat: repeat;          mask-repeat: repeat;
  -webkit-mask-size: var(--tile) var(--tile); mask-size: var(--tile) var(--tile);
}

/* Outer element carries the spotlight mask, inner carries the girih mask.
   Two nested single-mask elements — no mask-composite needed. */
.ground__reveal {
  opacity: 0;
  transition: opacity .5s ease;
  -webkit-mask-image: radial-gradient(circle var(--r, 300px) at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
          mask-image: radial-gradient(circle var(--r, 300px) at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
}
.ground__reveal > i {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--reveal);
  -webkit-mask-image: url(./girih.svg); mask-image: url(./girih.svg);
  -webkit-mask-repeat: repeat;          mask-repeat: repeat;
  -webkit-mask-size: var(--tile) var(--tile); mask-size: var(--tile) var(--tile);
}
:root[data-reveal="on"] .ground__reveal { opacity: var(--reveal-op); }

/* ---------- Chrome shared by all directions ---------- */

.skip {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  inline-size: auto; block-size: auto; clip-path: none;
  inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
  z-index: 99; padding: .6rem 1rem;
  background: var(--accent); color: #fff;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.toggles { display: flex; align-items: center; gap: var(--sp-1); }
.toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem;
  font-size: var(--step--1); line-height: 1;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: color .18s, border-color .18s, background-color .18s;
}
.toggle:hover { color: var(--ink-strong); border-color: var(--ink-muted); }
.toggle[aria-pressed="true"] { color: var(--accent-ink); border-color: currentColor; }

/* Draft/TODO flags — every unverified string is visibly marked. */
.flag {
  display: inline-block; vertical-align: super;
  margin-inline-start: .35em;
  padding: .1em .4em;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  /* fixed size — must not scale with display type, or it dwarfs the heading */
  font-size: .625rem; line-height: 1.5; font-weight: 500; letter-spacing: .04em;
  color: #8A5A00; background: rgba(214,158,46,.18);
  border: 1px solid rgba(214,158,46,.45); border-radius: 2px;
  text-transform: uppercase; white-space: nowrap;
}
:root[data-theme="dark"] .flag { color: #E8B75C; background: rgba(214,158,46,.14); }

/* Language visibility — both locales live in the DOM for the prototype. */
html[lang="en"] [data-lang="ar"] { display: none !important; }
html[lang="ar"] [data-lang="en"] { display: none !important; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .ground__reveal { display: none; }
}
@media (hover: none) {
  .ground__reveal { display: none; }
}