/* =========================================================
   IRK BWN Teach — Design Tokens
   AI Assistant for Teaching – IRK BWN (Brunei Darussalam)
   ========================================================= */

/* ---------- Fonts ----------
   Inter uses one variable-font source across weights 400–700 for Latin.
   Amiri handles Arabic script for Qur'anic / Hadith citations.
   IBM Plex Mono for reference codes and metadata.
*/
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Amiri";
  src: url("/static/fonts/Amiri-Regular-arabic.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Amiri";
  src: url("/static/fonts/Amiri-Bold-arabic.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Amiri";
  src: url("/static/fonts/Amiri-Regular-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* =========================================================
     COLORS — expressed in oklch for consistent hue rotation
     ========================================================= */

  /* Primary — deep scholarly teal-green.
     Chosen over the clichéd bright Islamic emerald: reads as
     academic/ministerial, still culturally coherent. */
  --primary-50:  oklch(0.97 0.015 175);
  --primary-100: oklch(0.94 0.030 175);
  --primary-200: oklch(0.88 0.050 175);
  --primary-300: oklch(0.78 0.065 175);
  --primary-400: oklch(0.62 0.070 175);
  --primary-500: oklch(0.48 0.070 175); /* base */
  --primary-600: oklch(0.42 0.060 175); /* default surface use */
  --primary-700: oklch(0.34 0.050 175);
  --primary-800: oklch(0.26 0.040 175);
  --primary-900: oklch(0.18 0.028 175);

  /* Accent — muted heritage gold. Nods to Brunei state colors
     without pastiching the flag. Used sparingly for highlights,
     awards, "premium" moments. */
  --gold-50:  oklch(0.97 0.020 82);
  --gold-100: oklch(0.94 0.045 82);
  --gold-200: oklch(0.88 0.075 82);
  --gold-300: oklch(0.82 0.100 82);
  --gold-400: oklch(0.76 0.110 82);
  --gold-500: oklch(0.72 0.110 82); /* base */
  --gold-600: oklch(0.62 0.100 82);
  --gold-700: oklch(0.50 0.085 82);
  --gold-800: oklch(0.38 0.065 82);
  --gold-900: oklch(0.26 0.045 82);

  /* Neutral — warm-cool balanced gray on a paper base */
  --paper:     oklch(0.985 0.004 85);
  --paper-2:   oklch(0.975 0.006 85);
  --paper-3:   oklch(0.960 0.008 85);
  --line:      oklch(0.910 0.006 85);
  --line-strong: oklch(0.860 0.008 85);

  --gray-50:  oklch(0.975 0.004 260);
  --gray-100: oklch(0.950 0.006 260);
  --gray-200: oklch(0.910 0.008 260);
  --gray-300: oklch(0.850 0.010 260);
  --gray-400: oklch(0.720 0.012 260);
  --gray-500: oklch(0.580 0.012 260);
  --gray-600: oklch(0.460 0.012 260);
  --gray-700: oklch(0.360 0.011 260);
  --gray-800: oklch(0.260 0.010 260);
  --gray-900: oklch(0.180 0.009 260);
  --ink:      oklch(0.200 0.010 260);

  /* Semantic — muted editorial (not sat-max alert colors) */
  --success-bg: oklch(0.96 0.020 155);
  --success-fg: oklch(0.42 0.075 155);
  --success:    oklch(0.55 0.100 155);

  --warning-bg: oklch(0.97 0.025 75);
  --warning-fg: oklch(0.45 0.090 65);
  --warning:    oklch(0.72 0.130 75);

  --danger-bg:  oklch(0.96 0.020 25);
  --danger-fg:  oklch(0.45 0.100 25);
  --danger:     oklch(0.55 0.150 25);

  --info-bg:    oklch(0.96 0.018 240);
  --info-fg:    oklch(0.42 0.080 240);
  --info:       oklch(0.55 0.110 240);

  /* =========================================================
     SEMANTIC ALIASES — always prefer these in component CSS
     ========================================================= */
  --fg-1: var(--ink);         /* primary text */
  --fg-2: var(--gray-700);    /* secondary text */
  --fg-3: var(--gray-500);    /* tertiary / captions */
  --fg-4: var(--gray-400);    /* placeholder / disabled */
  --fg-on-primary: var(--paper);
  --fg-on-gold: var(--gray-900);

  --bg-1: var(--paper);       /* app background */
  --bg-2: var(--paper-2);     /* raised surface */
  --bg-3: var(--paper-3);     /* subtle chip */
  --bg-inverse: var(--gray-900);

  --border-1: var(--line);
  --border-2: var(--line-strong);
  --border-focus: var(--primary-500);

  --brand: var(--primary-600);
  --brand-hover: var(--primary-700);
  --brand-soft: var(--primary-50);
  --accent: var(--gold-600);
  --accent-soft: var(--gold-50);

  /* =========================================================
     TYPE — family stacks
     ========================================================= */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Amiri", "Scheherazade New", "Traditional Arabic", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Base sizing — modular scale, 1.25x */
  --fs-12: 0.75rem;    /* 12 caption */
  --fs-13: 0.8125rem;  /* 13 small */
  --fs-15: 0.9375rem;  /* 15 body */
  --fs-17: 1.0625rem;  /* 17 body-lead */
  --fs-20: 1.25rem;    /* 20 h4 */
  --fs-24: 1.5rem;     /* 24 h3 */
  --fs-30: 1.875rem;   /* 30 h2 */
  --fs-38: 2.375rem;   /* 38 h1 */
  --fs-48: 3rem;       /* 48 display */

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-normal: 1.50;
  --lh-relaxed: 1.65;
  --lh-arabic: 1.85;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* =========================================================
     SPACING — 4px base grid
     ========================================================= */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* =========================================================
     RADII
     ========================================================= */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 999px;

  /* =========================================================
     SHADOWS — restrained. Elevation via border + subtle shadow.
     ========================================================= */
  --sh-hairline: 0 0 0 1px var(--border-1);
  --sh-1: 0 1px 2px oklch(0 0 0 / 0.04), 0 1px 1px oklch(0 0 0 / 0.03);
  --sh-2: 0 2px 4px oklch(0 0 0 / 0.04), 0 4px 8px oklch(0 0 0 / 0.04);
  --sh-3: 0 4px 8px oklch(0 0 0 / 0.05), 0 12px 24px oklch(0 0 0 / 0.06);
  --sh-focus: 0 0 0 3px oklch(0.48 0.070 175 / 0.22);
  --sh-inset: inset 0 1px 0 oklch(1 0 0 / 0.6);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasize: cubic-bezier(0.3, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   Use these in components rather than raw font-size utils.
   ========================================================= */
.display, h1.display {
  font: var(--fw-semibold) var(--fs-48)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h1, .h1 {
  font: var(--fw-semibold) var(--fs-38)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font: var(--fw-semibold) var(--fs-30)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font: var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-sans);
  color: var(--fg-1);
}
.lead {
  font: var(--fw-regular) var(--fs-17)/var(--lh-normal) var(--font-sans);
  color: var(--fg-2);
}
p, .body {
  font: var(--fw-regular) var(--fs-15)/var(--lh-normal) var(--font-sans);
  color: var(--fg-1);
}
.small {
  font: var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-sans);
  color: var(--fg-2);
}
.caption {
  font: var(--fw-medium) var(--fs-12)/var(--lh-normal) var(--font-sans);
  color: var(--fg-3);
}
.overline {
  font: var(--fw-semibold) var(--fs-12)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.arabic {
  font-family: var(--font-arabic);
  font-size: 1.35em;
  line-height: var(--lh-arabic);
  direction: rtl;
  text-align: right;
  color: var(--fg-1);
}
.arabic-inline {
  font-family: var(--font-arabic);
  font-size: 1.1em;
  direction: rtl;
  unicode-bidi: isolate;
}

/* Base reset for previews */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}
* { box-sizing: border-box; }