/* What: the closed custom-property list of spec 6.3 plus the 6.2 font stacks and @font-face rules.
   Use: loaded first by every layout, before app.css / admin.css.
   Needs: public/assets/fonts/*.woff2. */

@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

/* The body face carries both scripts: the Arabic subset above, the Latin one here, so a Latin
   word inside an Arabic line - "MiMundo", an email address, a date - is set in the same face
   rather than dropping to whatever the device calls system-ui. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122; }

/* Alexandria is one variable file per script, so every display weight from 100 to 900 comes out of
   the same 31 KB - and because it carries Arabic and Latin in one design, an Arabic heading and the
   "MiMundo" inside it are set in the same letters. Its Kufi geometry is what makes a heading read as
   a heading beside the body's Plex. */
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/alexandria-var-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/alexandria-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122; }

/* Dates, counts, seat numbers and certificate codes are data: they are set in one monospace so a
   column of them lines up and a code can be read back character by character. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122; }

:root {
  /* Deep blue, the quiet ground the brand green sits on: the footer, a dark tile. */
  --navy-900: #0A1A2F; --navy-800: #0F2440; --navy-700: #16314F; --navy-600: #22456B; --navy-500: #35618F;
  /* The brand. --teal-600 is the green of the Mi Mundo mark, sampled from the artwork. */
  --teal-700: #0A4A40; --teal-600: #106457; --teal-500: #16806F; --teal-400: #3BAF98;
  --teal-100: #C5E4DC; --teal-50: #EAF5F1;
  --gold-700: #7A5A16; --gold-600: #8F6D1E; --gold-500: #C9A227; --gold-400: #DCBB61;
  --gold-100: #F2E6C2; --gold-50: #FBF6E8;
  /* Aqua is the one signal that reads as "happening now" beside a green brand: it carries the live
     dot and the focus ring, and nothing else. */
  --cyan-500: #21B79B; --cyan-400: #5FD3BC; --cyan-100: #D8F3EC;
  /* The neutrals carry the wordmark's green-black cast, so grey never looks blue beside the brand. */
  --ink-900: #0B1F1A; --ink-700: #38463F; --ink-500: #5C6B64; --ink-400: #8A968F;
  --ink-300: #BCC6C0; --ink-200: #DEE5E1; --ink-100: #EDF2EF; --ink-50: #F6F9F7;
  --success: #106457; --warning: #9A6C12; --danger: #B3402C; --info: #1B3A6B; --zoom: #1E6FD9;
  --bg: #F7F9F8; --surface: #FFFFFF; --surface-2: #EFF4F1; --surface-raised: #FFFFFF;
  --border: #E0E8E3; --border-strong: #C2CEC7;
  --text: #0B1F1A; --text-muted: #5C6B64; --text-faint: #6E7B75;
  --text-on-brand: #FFFFFF; --text-on-gold: #0B1F1A;
  --primary: #106457; --primary-hover: #0A4A40; --primary-soft: #EAF5F1;
  --accent: var(--gold-500); --accent-soft: var(--gold-50); --focus: var(--cyan-500);
  --grad-hero: linear-gradient(180deg, #FFFFFF 0%, #F6FAF8 100%);
  --grad-gold: linear-gradient(135deg, #C9A227, #EBD79A 46%, #8F6D1E);
  /* The mark is a cluster of cells; the hero's ambient field is the same idea at a larger scale. */
  --grad-ai: radial-gradient(circle at 18% 30%, rgba(16, 100, 87, .05), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(201, 162, 39, .05), transparent 38%);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;
  --radius-sm: 6px; --radius-md: 9px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 31, 26, .05);
  --shadow-2: 0 8px 24px -6px rgba(11, 31, 26, .12), 0 2px 6px -2px rgba(11, 31, 26, .06);
  --shadow-3: 0 28px 64px -16px rgba(11, 31, 26, .26);
  --shadow-glow: 0 0 0 4px rgba(33, 183, 155, .18);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px;
  --fs-2xl: 25px; --fs-3xl: 32px; --fs-4xl: 46px; --fs-jumbo: clamp(96px, 22vw, 320px);
  --lh-tight: 1.25; --lh-body: 1.55; --lh-body-ar: 1.75;
  --tabbar-h: 64px; --topbar-h: 60px; --sidebar-w: 252px; --content-max: 1200px; --dock-w: clamp(330px, 24vw, 400px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --z-sticky: 10; --z-sheet: 40; --z-modal: 50; --z-toast: 60;
  /* Two faces do the work: Alexandria sets every heading in both scripts, Plex Sans Arabic sets every
     line of reading in both scripts. The mono face is named where data is set, not through a token. */
  --font-arabic: "IBM Plex Sans Arabic"; --font-display: "Alexandria"; --font-body: "IBM Plex Sans Arabic";
}

html[data-theme="dark"] {
  --success: #3BAF98; --warning: #DCBB61; --danger: #E08A76; --info: #7FA4F5;
  --bg: #071713; --surface: #0E2620; --surface-2: #14332B; --surface-raised: #1B443A;
  --border: #204439; --border-strong: #31604F;
  --text: #EFF6F3; --text-muted: #A6B8B0; --text-faint: #8A968F;
  --text-on-brand: #FFFFFF; --text-on-gold: #0B1F1A;
  --primary: #3BAF98; --primary-hover: #5FD3BC; --primary-soft: #11342C;
  --accent: var(--gold-400); --accent-soft: #2E2611; --focus: var(--cyan-400);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .6);
  --shadow-glow: 0 0 0 4px rgba(33, 183, 155, .25);
}