/* ============================================================
   G&K Design System — Colors & Typography
   Galal & Karawi Management Consulting, DMCC
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("fonts/NotoNaskhArabic-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     COLOR — Brand
     ---------------------------------------------------------- */
  --silver:        #C0C0C0;   /* logo silver — brand neutral */
  --teal:          #27F5BE;   /* growth / positive */
  --cyan:          #27C5F5;   /* clarity / insight */
  --blue:          #275EF5;   /* trust / primary action */

  /* Brand tints (10/20/40 mixes with white) for soft surfaces */
  --teal-50:       #E9FEF8;
  --teal-100:      #C9FCEC;
  --cyan-50:       #E9F9FE;
  --cyan-100:      #C9F1FC;
  --blue-50:       #E9EEFE;
  --blue-100:      #C9D5FC;

  /* Brand shades (mixed with black) for hovers / pressed */
  --blue-700:      #1F4ECC;
  --blue-800:      #173EA3;
  --cyan-700:      #1FA3CC;
  --teal-700:      #1FCC9E;

  /* ----------------------------------------------------------
     COLOR — Neutrals (warm-cool, cooler than pure grey)
     ---------------------------------------------------------- */
  --white:         #FFFFFF;
  --paper:         #FAFBFC;   /* page background */
  --bg-soft:       #F4F6F8;   /* subtle section bg */
  --line:          #ECEEF1;   /* hairline borders */
  --line-strong:   #D9DCE0;
  --silver-soft:   #E5E7EA;   /* lighter silver for backgrounds */

  --ink-900:       #0E1726;   /* near-black, primary text */
  --ink-700:       #2A3344;
  --ink-500:       #5B6577;   /* secondary text */
  --ink-400:       #7C8597;
  --ink-300:       #A6ADBB;   /* placeholder / disabled */

  /* ----------------------------------------------------------
     COLOR — Semantic foreground / background tokens
     ---------------------------------------------------------- */
  --fg-1:          var(--ink-900);   /* primary text */
  --fg-2:          var(--ink-500);   /* secondary text */
  --fg-3:          var(--ink-300);   /* tertiary / placeholder */
  --fg-on-brand:   var(--white);
  --fg-link:       var(--blue);

  --bg-1:          var(--white);
  --bg-2:          var(--paper);
  --bg-3:          var(--bg-soft);
  --bg-brand:      var(--blue);
  --bg-accent:     var(--teal);

  --border:        var(--line);
  --border-strong: var(--line-strong);
  --focus-ring:    color-mix(in srgb, var(--blue) 35%, transparent);

  /* Status — kept aligned to brand palette */
  --success:       var(--teal-700);
  --info:          var(--cyan);
  --warning:       #F5A627;
  --danger:        #E5484D;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------- */
  --font-sans:     "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-arabic:   "Noto Naskh Arabic", "Roboto", system-ui, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (modular, 1.25 ratio, 16px base) */
  --fs-12:         0.75rem;     /* 12 — micro */
  --fs-14:         0.875rem;    /* 14 — caption */
  --fs-16:         1rem;        /* 16 — body */
  --fs-18:         1.125rem;    /* 18 — body large */
  --fs-20:         1.25rem;     /* 20 — lead */
  --fs-24:         1.5rem;      /* 24 — h4 */
  --fs-30:         1.875rem;    /* 30 — h3 */
  --fs-38:         2.375rem;    /* 38 — h2 */
  --fs-48:         3rem;        /* 48 — h1 */
  --fs-64:         4rem;        /* 64 — display */
  --fs-80:         5rem;        /* 80 — hero */

  /* Weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Line heights */
  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  /* Tracking */
  --tr-tight:      -0.02em;
  --tr-normal:     0;
  --tr-wide:       0.02em;
  --tr-eyebrow:    0.14em;   /* uppercase eyebrow tracking */

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS / ELEVATION
     subtle, cool-tinted; layered system
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(14, 23, 38, 0.04), 0 1px 1px rgba(14, 23, 38, 0.03);
  --shadow-2: 0 4px 12px rgba(14, 23, 38, 0.06), 0 2px 4px rgba(14, 23, 38, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 23, 38, 0.08), 0 4px 8px rgba(14, 23, 38, 0.04);
  --shadow-4: 0 24px 56px rgba(14, 23, 38, 0.10), 0 8px 16px rgba(14, 23, 38, 0.05);
  --shadow-brand: 0 12px 32px rgba(39, 94, 245, 0.18);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:     120ms;
  --t-base:     200ms;
  --t-slow:     320ms;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container:    1200px;
  --container-narrow: 880px;
  --gutter:       2rem;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  margin: 0;
}

/* Headings — Roboto Light for display, Medium for sub-heads.
   Sparse, modern, generous tracking-tight on display sizes. */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}

.display {
  font-weight: var(--fw-light);
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.hero {
  font-weight: var(--fw-light);
  font-size: var(--fs-80);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-weight: var(--fw-light);
  font-size: var(--fs-38);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

h5, .h5 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

h6, .h6 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

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

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

.micro {
  font-size: var(--fs-12);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--blue-700); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

/* Selection */
::selection {
  background: color-mix(in srgb, var(--blue) 22%, transparent);
  color: var(--ink-900);
}

/* Arabic helpers */
[lang="ar"], .arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  line-height: 1.8;
}