/* TerraTrade - base layer: tokens, themes, reset, type, utilities, RTL.
   Design language remixed from the Mohammad Makki portfolio (glass cards, mono eyebrows, gradient type,
   grain, blob field), re-toned to the TerraTrade brand (forest / leaf / mint / harvest amber). */
@layer tokens, reset, base, components, sections, fx, utilities;

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@layer tokens {
  :root {
    /* brand (from the TerraTrade company profile) */
    --forest: #013D27; --logo: #21401C; --leaf: #00AA01; --leaf-2: #03C704; --sprout: #54BA47;
    --mint: #E9FFE5; --amber: #FFA612; --amber-2: #FAA51C;

    /* light theme = default ("mint daylight", like the deck) */
    --bg: #F3FBF0; --bg-2: #E6F7E0; --surface: #FFFFFF;
    --card: rgba(255, 255, 255, .72); --card-solid: #FFFFFF; --card-bd: rgba(1, 61, 39, .13);
    --txt: #0B2A1C; --muted: #486152; --faint: rgba(11, 42, 28, .35);
    --accent: #0A7A33;            /* text-safe green: 5.4:1 on white */
    --accent-2: #54BA47; --warm: #FFA612; --warm-ink: #8A5200; /* amber text on light = dark ochre (4.9:1) */
    --on-accent: #FFFFFF;
    --grad: linear-gradient(100deg, var(--forest) 0%, #0A7A33 38%, var(--sprout) 70%, var(--amber) 100%);
    --grad-btn: linear-gradient(100deg, #075F28, #0A7A33 55%, #0E7F36); /* white text ≥5:1 across the gradient */
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
    --shadow: 0 24px 60px -32px rgba(1, 61, 39, .45);
    --glass-bg: color-mix(in srgb, var(--bg) 78%, transparent);
    --sea: #D6ECF2; --land-2: #EAF5E6; --land-2-bd: #C7DBC0;
    /* blob field (RGB triplets) */
    --c1: 84, 186, 71; --c2: 255, 166, 18; --c3: 3, 199, 4; --c4: 1, 61, 39; --c5: 140, 214, 120;
    --blob-o: .32;
    --grain-o: .035;

    --maxw: 1180px; --ease: cubic-bezier(.22, 1, .36, 1);
    --disp: "Lexend", "Sora", system-ui, sans-serif;
    --body: "Sora", "Helvetica Neue", Arial, sans-serif;
    --mono: "Space Mono", ui-monospace, monospace;
    --r-sm: 10px; --r: 18px; --r-lg: 24px;
    --nav-h: 68px;
    color-scheme: light;
  }
  /* "night harvest" - optional dark theme */
  html.dark {
    --bg: #04150E; --bg-2: #07211A; --surface: #0A2419;
    --card: rgba(233, 255, 229, .05); --card-solid: #0C281C; --card-bd: rgba(233, 255, 229, .12);
    --txt: #EEFAE9; --muted: #A8C6B2; --faint: rgba(238, 250, 233, .3);
    --accent: #6FDB5E; --accent-2: #54BA47; --warm: #FFB938; --warm-ink: #FFB938;
    --on-accent: #04150E;
    --grad: linear-gradient(100deg, #EEFAE9 0%, #9BE88C 35%, var(--sprout) 62%, var(--amber) 100%);
    --grad-btn: linear-gradient(100deg, #54BA47, #7ED957);
    --shadow: 0 30px 70px -34px rgba(0, 0, 0, .7);
    --sea: #06283A; --land-2: #0B2B1E; --land-2-bd: #164A33;
    --c1: 84, 186, 71; --c2: 255, 166, 18; --c3: 3, 150, 60; --c4: 1, 90, 55; --c5: 30, 120, 70;
    --blob-o: .42; --grain-o: .05;
    color-scheme: dark;
  }
  [dir="rtl"] {
    --disp: "Noto Kufi Arabic", "Lexend", sans-serif;
    --body: "IBM Plex Sans Arabic", "Sora", sans-serif;
    /* a monospace fallback would render Arabic letters unjoined - use the Arabic text face (Latin digits
       still come from Space Mono, next in the stack) */
    --mono: "IBM Plex Sans Arabic", "Sora", sans-serif;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 8px); }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }
  body { margin: 0; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  p, h1, h2, h3, h4, figure, ul, ol, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :where(dialog) { color: inherit; }
}

@layer base {
  html, body { overflow-x: clip; }
  body {
    font-family: var(--body); color: var(--txt); background: var(--bg); line-height: 1.6;
    font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    transition: background-color .5s, color .5s;
  }
  html.dlgopen, body.noscroll { overflow: hidden; }
  ::selection { background: color-mix(in srgb, var(--sprout) 40%, transparent); color: var(--txt); }
  h1, h2, h3, h4 { font-family: var(--disp); letter-spacing: -.015em; line-height: 1.08; font-weight: 700; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
  :where(p, dd, .fine) a:not([class]) { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
  /* numbers, phones, emails, spec values never get bidi-reordered inside RTL */
  bdi { unicode-bidi: isolate; direction: ltr; }
}

@layer utilities {
  .container { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip { position: fixed; inset-inline-start: 12px; top: -80px; z-index: 300; background: var(--forest); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top .2s; }
  .skip:focus { top: 12px; }
  .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .muted { color: var(--muted); }
  .nowrap { white-space: nowrap; }
  /* Progressive enhancement: content is only hidden for reveal when JS is running. */
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  /* failsafe: if the scripts never boot, reveal everything after 4s instead of leaving the page blank */
  .js:not(.booted) .reveal { animation: tt-failsafe 0s 4s forwards; }
  @keyframes tt-failsafe { to { opacity: 1; transform: none; } }
  [hidden] { display: none !important; }
  .js .reveal.in { opacity: 1; transform: none; }
  .flip-rtl:dir(rtl), [dir="rtl"] .flip-rtl { transform: scaleX(-1); }
}

/* Arabic typography: no tracking, no uppercase, roomier leading (tracking breaks letter joining). */
@layer base {
  [dir="rtl"] body { line-height: 1.85; }
  [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.45; }
  [dir="rtl"] :is(.kicker, .eyebrow, .num, .tag, .chip, .mono, .label, .btn, .tab, .marquee, .values-h, .scroll-cue, .mk-h, .globe-hint, .ch-k, .fitem dt, .fact dt,
    .photo-tag, .map-note, .mline .alt, .season-cap, .spec-cap, .hero-chip, .vnum, .snum, .idx, .face .fnum, .hud a span) { letter-spacing: 0 !important; text-transform: none !important; }
}

/* animation pause state (core/env.js): freezes every CSS animation; JS loops check html.paused */
html.paused *, html.paused *::before, html.paused *::after { animation-play-state: paused !important; }

@media (forced-colors: active) {
  .tab.active { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .h1-accent .ltr, .gradient-text, .h1-accent, .mline .fill, .marquee.m1 li, .big404 { forced-color-adjust: none; background: none !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}