/* ============================================================
   CHERT Design Tokens v1.0
   Single source of truth. Do not edit per-project.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --chert-orange:       #FF8651;
  --chert-orange-deep:  #F26B33;
  --chert-tan:          #D2B082;
  --chert-cream:        #FFFAE4;
  --chert-ink:          #1A1A18;

  /* ---- Extended ---- */
  --chert-surface:      #FFFFFF;
  --chert-surface-alt:  #FBF7EC;
  --chert-border:       #ECE0C2;
  --chert-border-strong:#D9C9A4;
  --chert-muted:        #6B6B66;
  --chert-orange-tint:  #FDEEE4;

  /* ---- Functional ---- */
  --chert-success:      #10B981;
  --chert-success-tint: #E7F8F2;
  --chert-warning:      #F59E0B;
  --chert-warning-tint: #FEF4E3;
  --chert-error:        #EF4444;
  --chert-error-tint:   #FDECEC;
  --chert-info:         #3B82F6;
  --chert-info-tint:    #EAF1FE;

  /* ---- Dark surfaces ---- */
  --chert-dark:         #151311;
  --chert-dark-surface: #1B1815;
  --chert-dark-border:  #26221D;
  --chert-dark-text:    #F3EDE0;
  --chert-dark-muted:   #A89E8D;

  /* ---- Type ---- */
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ar:      'IBM Plex Sans Arabic', 'Cairo', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --fs-display:  56px;
  --fs-h1:       40px;
  --fs-h2:       30px;
  --fs-h3:       22px;
  --fs-lg:       18px;
  --fs-base:     16px;
  --fs-sm:       14px;
  --fs-xs:       13px;
  --fs-overline: 12px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-ar:    1.7;

  /* ---- Spacing (8px 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;

  /* ---- Layout ---- */
  --maxw:       1200px;
  --maxw-wide:  1440px;
  --maxw-prose: 68ch;
  --gutter:     24px;
  --sidebar-w:  250px;
  --header-h:   72px;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-card: 16px;
  --radius-pill: 40px;

  /* ---- Shadow ---- */
  --shadow-card:     0 10px 30px -18px rgba(0,0,0,.2);
  --shadow-hover:    0 20px 40px -20px rgba(242,107,51,.4);
  --shadow-dropdown: 0 12px 32px -8px rgba(0,0,0,.18);
  --shadow-modal:    0 24px 64px -12px rgba(0,0,0,.3);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(.4,0,.2,1);
  --dur-fast:  120ms;
  --dur-base:  150ms;
  --dur-slow:  240ms;

  /* ---- Z-index ---- */
  --z-base: 0;      --z-sticky: 100;  --z-dropdown: 200;
  --z-overlay: 300; --z-modal: 400;   --z-toast: 500;
}

@media (min-width: 1024px) { :root { --gutter: 40px; } }
@media (max-width: 639px) {
  :root { --fs-display: 36px; --fs-h1: 30px; --fs-h2: 24px; --header-h: 64px; }
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--chert-cream);
  color: var(--chert-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

[lang="ar"] {
  font-family: var(--font-ar);
  font-size: 17px;
  line-height: var(--lh-ar);
  letter-spacing: normal;
}
[lang="ar"] em, [lang="ar"] i { font-style: normal; font-weight: 700; }
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

.ltr-content { direction: ltr; unicode-bidi: isolate; display: inline-block; }

:focus-visible {
  outline: 2px solid var(--chert-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- CHERT Atlas sign-in (login theme layer) ---- */
html[lang="ar"] body { font-family: var(--font-ar); font-size: 17px; line-height: var(--lh-ar); }
.skip-link { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; background: var(--chert-ink); color: var(--chert-cream); padding: 12px 16px; border-radius: var(--radius-sm); z-index: 500; font-weight: 700; text-decoration: none; }
.skip-link:focus { inset-block-start: 16px; }
.chert-login__wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 24px; }
.chert-login__card { background: var(--chert-surface); border: 1px solid var(--chert-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 32px; width: min(440px, 100%); display: grid; gap: 16px; }
.chert-login__brand { display: inline-flex; align-items: center; gap: 12px; }
.chert-login__brand img { height: 32px; width: auto; }
.chert-login__word { font-weight: 800; letter-spacing: 1px; font-size: var(--fs-lg); }
.chert-login__product { font-weight: 500; font-size: var(--fs-lg); }
.chert-login__product::before { content: "|"; color: var(--chert-tan); margin-inline: 2px 6px; }
[lang="ar"] .chert-login__word { letter-spacing: normal; }
.chert-login__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chert-login__head h1 { margin: 0; font-size: var(--fs-h3); font-weight: 700; }
.chert-login__lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--chert-border-strong); border-radius: var(--radius-pill); background: var(--chert-surface); color: var(--chert-ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.chert-login__lang:hover { background: var(--chert-orange-tint); }
.chert-form { display: grid; gap: 20px; }
.chert-field { display: grid; gap: 6px; }
.chert-label { font-size: var(--fs-sm); font-weight: 600; }
.chert-input { width: 100%; height: 44px; padding: 10px 14px; font: inherit; font-size: var(--fs-base); background: var(--chert-surface); border: 1px solid var(--chert-border); border-radius: var(--radius-sm); color: var(--chert-ink); }
.chert-input:focus { outline: none; border-color: var(--chert-orange); box-shadow: 0 0 0 3px rgba(255,134,81,.25); }
.chert-input--error { border-color: var(--chert-error); }
.chert-error { margin: 0; font-size: var(--fs-xs); display: flex; gap: 6px; align-items: center; }
.chert-error::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chert-error); flex: none; }
.chert-actions { display: flex; gap: 12px; margin: 0; }
.chert-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: var(--radius-sm); border: 0; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-decoration: none; width: 100%; }
.chert-btn--primary { background: var(--chert-orange); color: var(--chert-ink); }
.chert-btn--primary:hover { background: var(--chert-orange-deep); }
.chert-btn--secondary { background: transparent; border: 1.5px solid var(--chert-ink); color: var(--chert-ink); }
.chert-alert { display: flex; gap: 10px; align-items: flex-start; border-inline-start: 4px solid var(--chert-info); background: var(--chert-info-tint); padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.chert-alert__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chert-info); margin-block-start: 6px; flex: none; }
.chert-alert--error { border-color: var(--chert-error); background: var(--chert-error-tint); } .chert-alert--error .chert-alert__dot { background: var(--chert-error); }
.chert-alert--warning { border-color: var(--chert-warning); background: var(--chert-warning-tint); } .chert-alert--warning .chert-alert__dot { background: var(--chert-warning); }
.chert-alert--success { border-color: var(--chert-success); background: var(--chert-success-tint); } .chert-alert--success .chert-alert__dot { background: var(--chert-success); }
.chert-info { margin: 0; font-size: var(--fs-sm); }
.chert-link { color: var(--chert-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--chert-orange-deep); text-underline-offset: 3px; }
.chert-login__foot { margin: 0; font-size: var(--fs-xs); color: var(--chert-muted); }