/* ICC School — flattened stylesheet (fonts, colors, typography, spacing, effects, patterns, base) */

/* ===== tokens/fonts.css ===== */
/* ICC School — Webfonts
   Loaded from Google Fonts. These are SUBSTITUTE faces chosen to fit the brand
   brief (clean, modern, kid-friendly) + bilingual Arabic support.
   No brand fonts were supplied — see readme.md "Font substitution" note.

   Fredoka      — display / headings (rounded, playful, modern)
   Nunito Sans  — body copy (highly legible, friendly)
   Cairo        — Arabic + bilingual text (Arabic + Latin support) */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&family=Cairo:wght@400;500;600;700&display=swap");

/* ===== tokens/colors.css ===== */
/* ICC School — Color tokens
   Base palette sampled directly from the school logo:
   teal  #109FC0  (primary)   gold  #B4832F  (secondary)
   Extended into full scales + warm sand neutrals + playful accents. */

:root {
  /* --- Teal (primary) --- */
  --teal-50:  #E9F7FB;
  --teal-100: #CDEDF5;
  --teal-200: #9FDDEC;
  --teal-300: #63C6DF;
  --teal-400: #2FAFD1;
  --teal-500: #109FC0; /* brand teal (logo) */
  --teal-600: #0E85A2;
  --teal-700: #0C6C84;
  --teal-800: #0B5566;
  --teal-900: #0A4350;

  /* --- Gold / bronze (secondary) --- */
  --gold-50:  #FBF4E6;
  --gold-100: #F4E4C4;
  --gold-200: #E9CD93;
  --gold-300: #DBB25F;
  --gold-400: #C89A3E;
  --gold-500: #B4832F; /* brand gold (logo) */
  --gold-600: #966B26;
  --gold-700: #77551F;
  --gold-800: #5C4319;
  --gold-900: #463312;

  /* --- Warm sand neutrals --- */
  --sand-50:  #FBF8F2;
  --sand-100: #F5EFE3;
  --sand-200: #EBE2CF;
  --sand-300: #DACEB4;
  --sand-400: #BCAF92;

  /* --- Teal-tinted ink (text + deep neutrals) --- */
  --ink-900: #0F323B;
  --ink-800: #1B434D;
  --ink-700: #2C5560;
  --ink-600: #416874;
  --ink-500: #5B7A83;
  --ink-400: #8299A0;
  --ink-300: #AEBEC3;
  --ink-200: #D5DFE2;
  --ink-100: #EAF0F1;
  --white:   #FFFFFF;

  /* --- Playful accents (kid-friendly, drawn from the sunrise motif) --- */
  --coral-400: #F58A66;
  --coral-500: #F2724C; /* warm coral */
  --coral-600: #D95932;
  --sunny-400: #F7C766;
  --sunny-500: #F4B740; /* sun yellow */
  --sunny-600: #E09E1F;
  --leaf-400:  #6FC395;
  --leaf-500:  #4CAF7D; /* leaf green */
  --leaf-600:  #3B9066;

  /* ---------- Semantic aliases ---------- */
  --color-primary:        var(--teal-500);
  --color-primary-hover:  var(--teal-600);
  --color-primary-active: var(--teal-700);
  --color-primary-soft:   var(--teal-50);
  --color-primary-fg:     var(--white);

  --color-secondary:        var(--gold-500);
  --color-secondary-hover:  var(--gold-600);
  --color-secondary-active: var(--gold-700);
  --color-secondary-soft:   var(--gold-50);
  --color-secondary-fg:     var(--white);

  --color-accent:      var(--coral-500);
  --color-accent-soft: #FDE9E1;

  /* Surfaces & backgrounds */
  --surface-page:     var(--sand-50);
  --surface-card:     var(--white);
  --surface-sunk:     var(--sand-100);
  --surface-inverse:  var(--teal-800);
  --surface-brand:    var(--teal-500);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-brand: var(--white);
  --text-link:     var(--teal-600);
  --text-link-hover: var(--teal-700);

  /* Borders & lines */
  --border-soft:   var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--teal-200);
  --divider:       var(--sand-200);

  /* Semantic status */
  --color-success:      var(--leaf-500);
  --color-success-soft: #E4F4EC;
  --color-warning:      var(--sunny-500);
  --color-warning-soft: #FDF1D8;
  --color-danger:       #E0533D;
  --color-danger-soft:  #FBE6E1;
  --color-info:         var(--teal-500);
  --color-info-soft:    var(--teal-50);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(16, 159, 192, 0.35);
}

/* ===== tokens/typography.css ===== */
/* ICC School — Typography tokens
   Latin display: Fredoka (rounded, friendly, modern)
   Latin body:    Nunito Sans
   Arabic / bilingual: Cairo (supports Arabic + Latin, modern)
   NOTE: These are Google Fonts substitutes chosen to match the brand brief
   (clean modern sans, kid-friendly). No brand fonts were provided. */

:root {
  /* Families */
  --font-display: "Fredoka", "Cairo", system-ui, sans-serif;
  --font-body:    "Nunito Sans", "Cairo", system-ui, sans-serif;
  --font-arabic:  "Cairo", "Noto Kufi Arabic", "Nunito Sans", sans-serif;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Type scale (fluid-friendly rem, 16px base) */
  --fs-display-1: 3.875rem;  /* 62 — hero */
  --fs-display-2: 3.125rem;  /* 50 */
  --fs-h1: 2.5rem;           /* 40 */
  --fs-h2: 2rem;             /* 32 */
  --fs-h3: 1.625rem;         /* 26 */
  --fs-h4: 1.375rem;         /* 22 */
  --fs-lg: 1.25rem;          /* 20 */
  --fs-body: 1.25rem;        /* 20 */
  --fs-sm: 1rem;             /* 16 */
  --fs-xs: 0.875rem;         /* 14 */

  /* Line heights */
  --lh-tight: 1.1; /* @kind font */
  --lh-snug:  1.25; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* Letter spacing */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide:   0.04em; /* @kind font */
  --ls-caps:   0.08em; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ICC School — Spacing & sizing tokens (4px base grid) */

:root {
  --space-0:  0;
  --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;

  /* Layout */
  --container-max: 100%;
  --container-narrow: 760px;
  --gutter: var(--space-6);
  --section-y: var(--space-24);

  /* Radii — generous, kid-friendly rounding */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Control sizes */
  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 54px;
}

/* ===== tokens/effects.css ===== */
/* ICC School — Effects: shadows, transitions, z-index
   Shadows are soft and warmly tinted (teal-ink base) — never harsh black. */

:root {
  --shadow-xs: 0 1px 2px rgba(15, 50, 59, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 50, 59, 0.08);
  --shadow-md: 0 6px 18px rgba(15, 50, 59, 0.10);
  --shadow-lg: 0 14px 34px rgba(15, 50, 59, 0.12);
  --shadow-xl: 0 24px 60px rgba(15, 50, 59, 0.16);

  /* Warm glow for playful/brand cards */
  --shadow-teal: 0 12px 30px rgba(16, 159, 192, 0.22);
  --shadow-gold: 0 12px 30px rgba(180, 131, 47, 0.22);

  /* Motion — gentle, friendly easing with a touch of overshoot */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-header: 200; /* @kind other */
  --z-overlay: 900; /* @kind other */
  --z-modal: 1000; /* @kind other */
  --z-toast: 1100; /* @kind other */
}

/* ===== tokens/patterns.css ===== */
/* ICC School — Pattern & motif tokens
   The 8-point khatam star lattice is the brand's signature element.
   Apply as a background layer; control presence via opacity of a wrapper
   or by choosing the light "fill" variant. */

:root {
  --pattern-stars-teal: url("assets/patterns/stars-teal.svg"); /* @kind other */
  --pattern-stars-gold: url("assets/patterns/stars-gold.svg"); /* @kind other */
  --pattern-stars-fill: url("assets/patterns/stars-fill.svg"); /* @kind other */

  --pattern-size-sm: 70px;
  --pattern-size-md: 110px;
  --pattern-size-lg: 150px;

  /* Signature gradients (warm sunrise + brand teal) */
  --gradient-brand:   linear-gradient(135deg, var(--teal-500) 0%, var(--teal-700) 100%);
  --gradient-sunrise: linear-gradient(120deg, var(--sunny-400) 0%, var(--coral-500) 100%);
  --gradient-sand:    linear-gradient(180deg, var(--sand-50) 0%, var(--sand-100) 100%);
}

/* Utility layer classes shipped with the system */
.icc-pattern {
  background-image: var(--pattern-stars-teal);
  background-size: var(--pattern-size-md);
  background-repeat: repeat;
}
.icc-pattern--gold { background-image: var(--pattern-stars-gold); }
.icc-pattern--soft { opacity: 0.5; }

/* ===== tokens/base.css ===== */
/* ICC School — Base element styling (opt-in reset + sensible defaults).
   Kept minimal so components stay in control. */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.4em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

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

/* Arabic / RTL helper */
[dir="rtl"], .icc-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
}

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