/* ============================================================
   AutoMize Design System — Colors & Type
   ============================================================
   Brand: AutoMize (For Automation Solution)
   Primary direction: Arabic-first, white background, modern fintech
   Reference inspiration: tamara.co (clean, white, RTL, friendly)
   ============================================================ */

/* ---------- Brand font stack (local @font-face) -------------
   Arabic-capable families: Cairo, Baloo Bhaijaan 2, GT America Arabic
   Latin families:          Plus Jakarta Sans, IBM Plex Sans (3 widths)
   All TTF files live in /fonts at the project root.
   --------------------------------------------------------- */

/* —— Cairo (Arabic + Latin, primary text) —— */
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('fonts/Cairo-VariableFont_slnt_wght.ttf') format('truetype-variations'); }

/* —— Baloo Bhaijaan 2 (Arabic display, friendly/rounded) —— */
@font-face { font-family: 'Baloo Bhaijaan 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/BalooBhaijaan2-VariableFont_wght.ttf') format('truetype-variations'); }

/* —— GT America Arabic (premium Arabic display) —— */
@font-face { font-family: 'GT America Arabic'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('fonts/GTAmericaArabic-Thin.ttf') format('truetype'); }
@font-face { font-family: 'GT America Arabic'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('fonts/GTAmericaArabic-UltraLight.ttf') format('truetype'); }
@font-face { font-family: 'GT America Arabic'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/GTAmericaArabic-Light.ttf') format('truetype'); }
@font-face { font-family: 'GT America Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/GTAmericaArabic-Regular.ttf') format('truetype'); }
@font-face { font-family: 'GT America Arabic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/GTAmericaArabic-Medium.ttf') format('truetype'); }
@font-face { font-family: 'GT America Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/GTAmericaArabic-Bold.ttf') format('truetype'); }
@font-face { font-family: 'GT America Arabic'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/GTAmericaArabic-Black.ttf') format('truetype'); }

/* —— Plus Jakarta Sans (Latin, geometric modern) —— */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations'); }

/* —— IBM Plex Sans (Latin, technical/precise) —— */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype-variations'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 100 700; font-display: swap;
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'); }

:root {
  /* ============================================================
     CORE BRAND COLORS  (from official AutoMize brand guideline)
     ============================================================ */
  --am-emerald:        #28d394;   /* Emerald Green — primary action / CTAs */
  --am-emerald-600:    #1fb27d;
  --am-emerald-700:    #169164;
  --am-emerald-100:    #d4f5e7;
  --am-emerald-50:     #ecfbf4;

  --am-navy:           #1a355e;   /* Deep Navy Blue — primary text / dark surfaces */
  --am-navy-800:       #142a4a;
  --am-navy-900:       #0e2038;
  --am-navy-100:       #d1d8e3;
  --am-navy-50:        #eef1f6;

  --am-aqua:           #45d8d3;   /* Aqua Cyan — accent, highlights, illustration */
  --am-aqua-600:       #2bb8b3;
  --am-aqua-100:       #d6f5f3;
  --am-aqua-50:        #ebfafa;

  --am-steel:          #4e6f8c;   /* Steel Blue Gray — secondary text, muted UI */
  --am-steel-300:      #8fa3b8;
  --am-steel-200:      #b8c4d2;
  --am-steel-100:      #dde3eb;

  /* ============================================================
     NEUTRAL SCALE (warm-cool neutrals tuned to navy)
     ============================================================ */
  --am-white:          #ffffff;
  --am-bg:             #ffffff;          /* page background — white per direction */
  --am-bg-soft:        #f7f9fc;          /* hover / subtle section bg */
  --am-bg-muted:       #eef2f7;          /* card alt / disabled bg */
  --am-line:           #e3e8ef;          /* borders, dividers */
  --am-line-strong:    #c9d2dd;
  --am-ink-1:          #1a355e;          /* same as navy — primary text */
  --am-ink-2:          #4e6f8c;          /* steel — secondary text */
  --am-ink-3:          #8fa3b8;          /* tertiary / placeholder */

  /* ============================================================
     SEMANTIC FOREGROUND / BACKGROUND TOKENS
     ============================================================ */
  --fg-1:              var(--am-ink-1);
  --fg-2:              var(--am-ink-2);
  --fg-3:              var(--am-ink-3);
  --fg-on-dark:        #ffffff;
  --fg-on-emerald:     #0e2038;          /* navy on emerald reads better than white */
  --fg-link:           var(--am-emerald-700);

  --bg-page:           var(--am-bg);
  --bg-surface:        var(--am-white);
  --bg-soft:           var(--am-bg-soft);
  --bg-muted:          var(--am-bg-muted);
  --bg-dark:           var(--am-navy);
  --bg-darker:         var(--am-navy-900);

  --border:            var(--am-line);
  --border-strong:     var(--am-line-strong);
  --border-focus:      var(--am-emerald);

  /* ============================================================
     STATUS COLORS
     ============================================================ */
  --status-success:    #28d394;          /* reuse emerald */
  --status-warning:    #f5a524;
  --status-danger:     #e5484d;
  --status-info:       #45d8d3;          /* reuse aqua */

  /* ============================================================
     SIGNATURE GRADIENTS  (from logo + brand collateral)
     ============================================================ */
  --grad-brand:        linear-gradient(135deg, #28d394 0%, #1a355e 100%);
  --grad-brand-soft:   linear-gradient(135deg, #45d8d3 0%, #28d394 100%);
  --grad-aqua-emerald: linear-gradient(135deg, #45d8d3 0%, #28d394 100%);
  --grad-navy-deep:    linear-gradient(160deg, #1a355e 0%, #0e2038 100%);
  --grad-cta:          linear-gradient(180deg, #28d394 0%, #1fb27d 100%);
  --grad-hero-tint:    linear-gradient(180deg, #ecfbf4 0%, #ffffff 100%);

  /* ============================================================
     RADII — soft, generous (matches Tamara-style polish)
     ============================================================ */
  --radius-xs:         4px;
  --radius-sm:         8px;
  --radius-md:         12px;
  --radius-lg:         18px;
  --radius-xl:         24px;
  --radius-2xl:        32px;
  --radius-pill:       999px;

  /* ============================================================
     SHADOWS — soft, low-contrast on white
     ============================================================ */
  --shadow-xs:         0 1px 2px rgba(26, 53, 94, 0.06);
  --shadow-sm:         0 2px 6px rgba(26, 53, 94, 0.06), 0 1px 2px rgba(26, 53, 94, 0.04);
  --shadow-md:         0 8px 20px rgba(26, 53, 94, 0.08), 0 2px 4px rgba(26, 53, 94, 0.04);
  --shadow-lg:         0 18px 40px rgba(26, 53, 94, 0.10), 0 4px 8px rgba(26, 53, 94, 0.04);
  --shadow-xl:         0 32px 64px rgba(26, 53, 94, 0.14), 0 8px 16px rgba(26, 53, 94, 0.06);
  --shadow-emerald:    0 12px 28px rgba(40, 211, 148, 0.32);
  --shadow-inset:      inset 0 1px 2px rgba(26, 53, 94, 0.06);

  /* ============================================================
     SPACING SCALE (4px base)
     ============================================================ */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-8:           32px;
  --space-10:          40px;
  --space-12:          48px;
  --space-16:          64px;
  --space-20:          80px;
  --space-24:          96px;
  --space-32:          128px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:          120ms;
  --dur-base:          200ms;
  --dur-slow:          360ms;

  /* ============================================================
     TYPOGRAPHY — Cairo for both Arabic & Latin
     Headings use heavier weight; Arabic is the primary direction.
     ============================================================ */
  --font-sans:         'IBM Plex Sans Arabic', 'Plus Jakarta Sans', 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:      'Baloo Bhaijaan 2', 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-extrabold:      800;
  --fw-black:          900;

  /* Type scale (rem-based, mobile-first) */
  --fs-12:             0.75rem;     /* 12 */
  --fs-14:             0.875rem;    /* 14 — small label / caption */
  --fs-16:             1rem;        /* 16 — body */
  --fs-18:             1.125rem;    /* 18 — body lead */
  --fs-20:             1.25rem;     /* 20 — h6 */
  --fs-24:             1.5rem;      /* 24 — h5 */
  --fs-30:             1.875rem;    /* 30 — h4 */
  --fs-36:             2.25rem;     /* 36 — h3 */
  --fs-48:             3rem;        /* 48 — h2 */
  --fs-60:             3.75rem;     /* 60 — h1 */
  --fs-72:             4.5rem;      /* 72 — display */

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

  --ls-tight:          -0.02em;
  --ls-normal:         0;
  --ls-wide:           0.04em;
}

/* ============================================================
   BASE — applied to <html> / <body> when this stylesheet loads
   ============================================================ */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* RTL is the default for the Arabic site; keep LTR working too */
[dir="rtl"] body { letter-spacing: 0; }

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES / ELEMENT STYLES
   ============================================================ */
.h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, var(--fs-72));
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, var(--fs-60));
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

.h3, h3 {
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4, h4 {
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h5, h5 {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h6, h6 {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.lead {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body, p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.caption, small {
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.eyebrow {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--am-emerald-700);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--am-emerald-600); }

/* Selection */
::selection {
  background: var(--am-emerald-100);
  color: var(--am-navy-900);
}