/* =============================================================
   Remote& — Colors & Type Foundations
   AI PeopleOS for the GCC
   Direction: Mint canvas · Deep charcoal · Warm white surfaces
   v2026.04.30
   ============================================================= */

/* ---------- Webfonts ---------- */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* — Brand: Mint (the primary canvas) — */
  --r-mint-50:   #F1F8E8;
  --r-mint-100:  #E2F1D2;   /* PRIMARY ENVIRONMENT — hero / large panels */
  --r-mint-200:  #CDE8B0;
  --r-mint-300:  #B0DA8A;
  --r-mint-400:  #91C863;
  --r-mint-500:  #74B144;   /* PRIMARY — buttons, links on mint */
  --r-mint-600:  #5A9233;
  --r-mint-700:  #427025;
  --r-mint-800:  #2E5119;   /* deep forest — active states */
  --r-mint-900:  #1B3210;

  /* — Charcoal / Ink (the typographic anchor) — */
  --r-ink-50:   #F2F3F1;
  --r-ink-100:  #DDDFD9;
  --r-ink-200:  #B5B8AF;
  --r-ink-300:  #8A8F82;     /* muted text light */
  --r-ink-400:  #6B6F65;     /* muted text */
  --r-ink-500:  #4A4D45;
  --r-ink-600:  #353833;
  --r-ink-700:  #242524;
  --r-ink-800:  #1A1B19;
  --r-ink-900:  #111210;     /* SECONDARY — headlines, body */

  /* — Warm white / Surface — */
  --r-surface-50:  #FAFAF7;   /* default page bg */
  --r-surface-100: #F6F7F2;   /* raised alt surface */
  --r-surface-200: #EFF1EA;
  --r-border:      #E3E8DD;   /* default border */
  --r-border-strong: #CFD6C7;

  /* — Teal accent (AI / system / info — the calm signal) — */
  --r-teal-50:   #E0F2EE;
  --r-teal-100:  #C6E8E0;
  --r-teal-300:  #6FC2B2;
  --r-teal-500:  #2E8C7D;     /* ACCENT */
  --r-teal-600:  #1F7164;
  --r-teal-700:  #15554B;

  /* — Sand · DEPRECATED — kept only for backward compatibility.
     Do not use in new work. Reach for mint, teal, or warm-white surfaces.
     Will be removed in v2026.06. — */
  --r-sand-50:   #FAF3E6;
  --r-sand-100:  #F2E8D8;
  --r-sand-200:  #E5D5B5;
  --r-sand-300:  #D8C3A5;
  --r-sand-500:  #A88B5C;

  /* — Amber (warning / attention) — */
  --r-amber-50:   #FEF6E1;
  --r-amber-100:  #FDE9B7;
  --r-amber-500:  #E0941C;
  --r-amber-600:  #B97500;
  --r-amber-700:  #8A5800;

  /* — Danger (overdue / blocked / error) — */
  --r-danger-50:   #FBEAEA;
  --r-danger-100:  #F8D5D6;
  --r-danger-500:  #D0413F;
  --r-danger-600:  #A82E2D;
  --r-danger-700:  #7A1F1E;

  /* — Semantic — */
  --r-success: var(--r-mint-600);
  --r-success-soft: var(--r-mint-100);
  --r-warning: var(--r-amber-500);
  --r-warning-soft: var(--r-amber-100);
  --r-danger:  var(--r-danger-500);
  --r-danger-soft: var(--r-danger-100);
  --r-info:    var(--r-teal-500);
  --r-info-soft: var(--r-teal-100);

  /* — Spec aliases (semantic) — */
  --color-primary:        var(--r-mint-100);  /* the brand environment */
  --color-primary-strong: var(--r-mint-500);  /* CTA / buttons */
  --color-primary-hover:  var(--r-mint-600);
  --color-primary-soft:   var(--r-mint-50);
  --color-primary-deep:   var(--r-mint-800);  /* active states / forest */
  --color-secondary:      var(--r-ink-900);
  --color-accent:         var(--r-teal-500);
  --color-accent-soft:    var(--r-teal-100);

  --color-bg:             var(--r-surface-50);
  --color-bg-alt:         var(--r-surface-100);
  --color-bg-mint:        var(--r-mint-100);   /* the hero panel bg */
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-border:         var(--r-border);
  --color-border-strong:  var(--r-border-strong);
  --color-divider:        var(--r-surface-200);

  --color-text:           var(--r-ink-900);
  --color-text-soft:      var(--r-ink-600);
  --color-text-muted:     var(--r-ink-400);
  --color-text-subtle:    var(--r-ink-300);
  --color-text-inverse:   var(--r-surface-50);

  --color-success: var(--r-success);
  --color-warning: var(--r-warning);
  --color-danger:  var(--r-danger);
  --color-info:    var(--r-info);

  /* — Signature gradients (controlled, mint-led) — */
  --gradient-mint:     linear-gradient(160deg, #E2F1D2 0%, #CDE8B0 100%);
  --gradient-forest:   linear-gradient(160deg, #2E5119 0%, #427025 60%, #5A9233 100%);
  --gradient-ink:      linear-gradient(160deg, #111210 0%, #242524 100%);
  --gradient-mint-glow:radial-gradient(120% 80% at 18% 0%, rgba(116,177,68,0.18), transparent 60%), #E2F1D2;

  /* — Typography families — */
  --font-display: 'General Sans', 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body:    'Geist', 'General Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-arabic:  'IBM Plex Sans Arabic', 'Geeza Pro', 'Tahoma', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-serif:   'Instrument Serif', 'Times New Roman', serif; /* the ampersand glyph */

  /* — Type scale — */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;
  --text-6xl:  4.75rem;
  --text-7xl:  6.5rem;

  /* — Spacing (4px grid) — */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 88px;
  --space-12: 128px;

  /* — Radii (slightly larger; mint-direction is rounder/calmer) — */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    22px;
  --radius-2xl:   30px;
  --radius-3xl:   44px;
  --radius-pill:  999px;

  /* — Shadows (cool ink-tinted, soft) — */
  --shadow-sm:    0 1px 2px rgba(17, 18, 16, 0.05);
  --shadow-md:    0 4px 14px rgba(17, 18, 16, 0.06), 0 1px 3px rgba(17, 18, 16, 0.04);
  --shadow-lg:    0 14px 40px rgba(17, 18, 16, 0.08), 0 2px 6px rgba(17, 18, 16, 0.04);
  --shadow-xl:    0 28px 72px rgba(17, 18, 16, 0.12), 0 4px 12px rgba(17, 18, 16, 0.05);
  --shadow-card:  0 1px 0 rgba(17, 18, 16, 0.03), 0 4px 16px rgba(17, 18, 16, 0.05);
  --shadow-floating: 0 18px 50px rgba(46, 81, 25, 0.18), 0 4px 14px rgba(17, 18, 16, 0.06);
  --shadow-mint:  0 14px 40px rgba(116, 177, 68, 0.30);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(17,18,16,0.04);

  /* — Layout — */
  --max-w-prose:    68ch;
  --max-w-content:  1180px;
  --max-w-wide:     1320px;
  --sidebar-w:      264px;
  --topbar-h:       60px;
  --card-pad:       24px;
  --grid-gap:       24px;

  /* — Motion — */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.4);
  --ease-flow: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* ---------- Dark mode (charcoal-first; mint accents lift) ---------- */
[data-theme="dark"] {
  --color-bg:             #111210;
  --color-bg-alt:         #1A1B19;
  --color-bg-mint:        #1F2D17;       /* deep forest hero panel */
  --color-surface:        #1A1B19;
  --color-surface-raised: #242524;
  --color-border:         #2E2F2C;
  --color-border-strong:  #3D3F3A;
  --color-divider:        #1F211D;

  --color-text:           #F2F3F1;
  --color-text-soft:      #B5B8AF;
  --color-text-muted:     #8A8F82;
  --color-text-subtle:    #6B6F65;
  --color-text-inverse:   #111210;

  --color-primary:        #1F2D17;
  --color-primary-strong: #91C863;
  --color-primary-hover:  #B0DA8A;
  --color-primary-soft:   rgba(145, 200, 99, 0.14);
  --color-primary-deep:   #5A9233;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:    0 32px 80px rgba(0, 0, 0, 0.65);
  --shadow-card:  0 1px 0 rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-floating: 0 18px 50px rgba(0,0,0,0.55);
  --shadow-mint:  0 14px 40px rgba(145, 200, 99, 0.25);
}

/* =============================================================
   Semantic typography
   ============================================================= */
html { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-size: var(--text-base); line-height: 1.5; }

[dir="rtl"], [lang="ar"] { font-family: var(--font-arabic); }

h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--color-text); margin: 0; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--text-5xl); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; }
h2 { font-size: var(--text-4xl); line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.02em; }
h4 { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.015em; }
h5 { font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.01em; }

.display-xl { font-family: var(--font-display); font-size: var(--text-7xl); line-height: 0.95; letter-spacing: -0.04em; font-weight: 500; }
.display-lg { font-family: var(--font-display); font-size: var(--text-6xl); line-height: 0.98; letter-spacing: -0.035em; font-weight: 500; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

.editorial-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; line-height: 1.55; max-width: var(--max-w-prose); }
p.lead { font-size: var(--text-xl); line-height: 1.45; color: var(--color-text-soft); }
small, .caption { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.005em; }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--color-bg-alt); padding: 0.1em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }

a { color: var(--color-primary-deep); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

::selection { background: var(--r-mint-200); color: var(--r-ink-900); }

/* The ampersand — the brand glyph (deep forest on mint, mint on ink) */
.ampersand {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary-deep);
  letter-spacing: -0.04em;
}

/* =============================================================
   Mobile / narrow viewport polish — override inline grids and
   typography at <= 760px so pages remain usable on phones.
   ============================================================= */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* Reset multi-column grids to single column */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="gridTemplateColumns"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 0.85fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Reduce hero / display headings */
  h1[style*="clamp(48px"],
  h1[style*="clamp(40px"] { font-size: 40px !important; line-height: 1.02 !important; }
  h2[style*="font-size: 56"],
  h2[style*="fontSize: 56"] { font-size: 32px !important; line-height: 1.05 !important; }
  h2[style*="font-size: 48"] { font-size: 30px !important; }

  /* Reduce huge ampersand decorations */
  span[style*="font-size: 1000px"],
  span[style*="fontSize: 1000"] { font-size: 360px !important; }
  span[style*="font-size: 800px"] { font-size: 320px !important; }
  span[style*="font-size: 600px"] { font-size: 260px !important; }
  span[style*="font-size: 540px"] { font-size: 240px !important; }

  /* Section padding compression */
  section[style*="padding: 120px"] { padding: 64px 0 !important; }
  section[style*="padding: 88px"]  { padding: 56px 0 !important; }
  section[style*="padding: 80px"]  { padding: 48px 0 !important; }
  div[style*="padding: 0 40px"]    { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="padding: 88px 56px"] { padding: 48px 24px !important; }
  div[style*="padding: 88px 40px"] { padding: 56px 20px 64px !important; }

  /* Header — hide nav on narrow, show only logo + CTA */
  header nav { display: none !important; }
  header div[style*="gap: 6px"] button,
  header div[style*="gap: 6px"] a[href="#"]:not([style*="background"]) { display: none !important; }
  header [style*="height: 18"][style*="background: #E3E8DD"] { display: none !important; }

  /* Footer + logo strip stack */
  footer [style*="grid-template-columns"],
  section[style*="border-top"] [style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  /* Tame the giant numbers in stat strips */
  div[style*="font-size: 64"][style*="font-display"],
  div[style*="fontSize: 64"]      { font-size: 44px !important; }

  /* Final CTA grid stack */
  [style*="grid-template-columns: 1.2fr 1fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}