/**
 * tokens.css — FFC design tokens as CSS custom properties.
 *
 * GENERATED from the FFC Design System tokens.json (light theme only: the
 * marketing site has no dark theme). Do not hand-edit values; regenerate or
 * change them in the design system first. Names match the design system
 * exactly (--brand-red, --space-4, --radius-md, --elevation-1 ...).
 *
 * Load order (layouts/app.blade.php): font preloads -> tokens.css -> base.css
 * -> forms.css -> ds.css -> chrome.css -> page CSS.
 * Usage manual: docs/DESIGN_SYSTEM.md
 *
 * Breakpoints (CSS variables cannot be used inside @media, so copy these):
 *   mobile   max-width: 767px
 *   tablet   min-width: 768px  and max-width: 1023px
 *   desktop  min-width: 1024px and max-width: 1439px
 *   wide     min-width: 1440px
 *   header   burger menu below 1280px (max-width: 1279px)
 */

/* ==========================================================================
   Fonts
   Display: Somar Sans (self-hosted, one family, real weights 400-700).
   Text/UI: IBM Plex Sans Arabic (self-hosted woff2, Arabic + Latin subsets,
   downloaded from Google Fonts; SIL Open Font License).
   ========================================================================== */

@font-face {
    font-family: 'Somar Sans';
    src: url('../fonts/SomarSans-Regular.woff2') format('woff2'),
         url('../fonts/SomarSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Somar Sans';
    src: url('../fonts/SomarSans-Medium.woff2') format('woff2'),
         url('../fonts/SomarSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Somar Sans';
    src: url('../fonts/SomarSans-SemiBold.woff2') format('woff2'),
         url('../fonts/SomarSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Somar Sans';
    src: url('../fonts/SomarSans-Bold.woff2') format('woff2'),
         url('../fonts/SomarSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
    font-weight: 400;
    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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-500-latin-ext.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
    font-weight: 500;
    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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-600-latin-ext.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
    font-weight: 600;
    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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-700-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
    font-weight: 700;
    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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
    /* Colour — light theme values from tokens.json. */
    --brand-red: #ba1e23;
    --brand-red-hover: #a31a1f;
    --brand-red-pressed: #8c161a;
    --brand-red-ink: #ba1e23;
    --brand-red-tint: #fdf3f3;
    --brand-maroon: #7a1216;
    --brand-aqua: #84f0d9;
    --brand-aqua-ink: #05715c;
    --brand-aqua-tint: #eafbf6;
    --red-50: #fdf3f3;
    --red-100: #fbe3e4;
    --red-200: #f5c5c7;
    --red-300: #ec9a9d;
    --red-400: #de6266;
    --red-500: #cc3339;
    --red-600: #ba1e23;
    --red-700: #9b1a1e;
    --red-800: #7a1216;
    --red-900: #5c0d10;
    --red-950: #3a0709;
    --neutral-0: #ffffff;
    --neutral-50: #faf9f8;
    --neutral-100: #f5f3f2;
    --neutral-200: #eae7e5;
    --neutral-300: #d9d4d2;
    --neutral-400: #b3adaa;
    --neutral-500: #8a8380;
    --neutral-600: #665f5d;
    --neutral-700: #4a4442;
    --neutral-800: #2e2b2a;
    --neutral-900: #1c1a19;
    --neutral-950: #0f0e0e;
    --surface-base: #f5f3f2;
    --surface-raised: #ffffff;
    --surface-raised-alt: #faf9f8;
    --surface-sunken: #eae7e5;
    --surface-brand: #ba1e23;
    --surface-brand-deep: #7a1216;
    --surface-overlay: rgba(255, 255, 255, 0.72);
    --surface-scrim: rgba(15, 14, 14, 0.4);
    --ink-primary: #1c1a19;
    --ink-secondary: #4a4442;
    --ink-tertiary: #8a8380;
    --ink-quaternary: #b3adaa;
    --ink-inverse: #ffffff;
    --ink-on-brand: #ffffff;
    --ink-brand: #ba1e23;
    --border-subtle: #eae7e5;
    --border-default: #d9d4d2;
    --border-strong: #b3adaa;
    --border-brand: #ba1e23;
    --separator: rgba(28, 26, 25, 0.12);
    --focus-ring: rgba(186, 30, 35, 0.24);
    --status-success: #0f7a52;
    --status-success-surface: #e7f6ef;
    --status-warning: #b45309;
    --status-warning-surface: #fdf4e6;
    --status-critical: #7a1216;
    --status-critical-surface: #fbeaea;
    --status-danger: #a11217;
    --status-danger-surface: #fdeced;
    --status-info: #0a6ebd;
    --status-info-surface: #e8f2fb;
    --chart-1: #ba1e23;
    --chart-2: #05715c;
    --chart-3: #b45309;
    --chart-4: #0a6ebd;
    --chart-5: #7a1216;
    --chart-6: #8a8380;
    --chart-grid: rgba(28, 26, 25, 0.08);
    --chart-track: #eae7e5;

    /* Type families */
    --font-display: "Somar Sans", "IBM Plex Sans Arabic", "SF Arabic", system-ui, sans-serif;
    --font-sans: "IBM Plex Sans Arabic", -apple-system, "SF Arabic", system-ui, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Type scale: --type-<style>-size / -leading / -weight [/ -tracking].
       Use the .ds-<style> utility classes in ds.css rather than these directly. */
    --type-display-lg-size: 56px;
    --type-display-lg-leading: 56px;
    --type-display-lg-weight: 700;
    --type-display-lg-tracking: -0.02em;
    --type-display-md-size: 44px;
    --type-display-md-leading: 48px;
    --type-display-md-weight: 700;
    --type-display-md-tracking: -0.015em;
    --type-display-sm-size: 34px;
    --type-display-sm-leading: 40px;
    --type-display-sm-weight: 700;
    --type-display-sm-tracking: -0.01em;
    --type-large-title-size: 34px;
    --type-large-title-leading: 42px;
    --type-large-title-weight: 700;
    --type-title-1-size: 28px;
    --type-title-1-leading: 36px;
    --type-title-1-weight: 600;
    --type-title-2-size: 22px;
    --type-title-2-leading: 30px;
    --type-title-2-weight: 600;
    --type-title-3-size: 20px;
    --type-title-3-leading: 28px;
    --type-title-3-weight: 600;
    --type-headline-size: 17px;
    --type-headline-leading: 24px;
    --type-headline-weight: 600;
    --type-body-size: 17px;
    --type-body-leading: 26px;
    --type-body-weight: 400;
    --type-body-emphasized-size: 17px;
    --type-body-emphasized-leading: 26px;
    --type-body-emphasized-weight: 600;
    --type-callout-size: 16px;
    --type-callout-leading: 24px;
    --type-callout-weight: 400;
    --type-subheadline-size: 15px;
    --type-subheadline-leading: 22px;
    --type-subheadline-weight: 400;
    --type-footnote-size: 13px;
    --type-footnote-leading: 20px;
    --type-footnote-weight: 400;
    --type-caption-1-size: 12px;
    --type-caption-1-leading: 16px;
    --type-caption-1-weight: 400;
    --type-caption-2-size: 11px;
    --type-caption-2-leading: 15px;
    --type-caption-2-weight: 400;
    --type-label-caps-size: 11px;
    --type-label-caps-leading: 15px;
    --type-label-caps-weight: 600;
    --type-label-caps-tracking: 0.06em;
    --type-amount-xl-size: 40px;
    --type-amount-xl-leading: 46px;
    --type-amount-xl-weight: 600;
    --type-amount-lg-size: 30px;
    --type-amount-lg-leading: 36px;
    --type-amount-lg-weight: 700;
    --type-amount-md-size: 22px;
    --type-amount-md-leading: 28px;
    --type-amount-md-weight: 600;
    --type-amount-sm-size: 17px;
    --type-amount-sm-leading: 24px;
    --type-amount-sm-weight: 600;

    /* Spacing — 4pt grid */
    --space-0: 0;
    --space-px: 1px;
    --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;

    /* Radius */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* Elevation — a shadow means 'this floats'; --elevation-brand once per view */
    --elevation-0: none;
    --elevation-1: 0 1px 2px rgba(28, 26, 25, 0.05), 0 1px 3px rgba(28, 26, 25, 0.06);
    --elevation-2: 0 2px 8px rgba(28, 26, 25, 0.06), 0 1px 2px rgba(28, 26, 25, 0.04);
    --elevation-3: 0 8px 24px rgba(28, 26, 25, 0.08);
    --elevation-4: 0 24px 48px rgba(28, 26, 25, 0.16);
    --elevation-brand: 0 8px 20px rgba(186, 30, 35, 0.18);

    /* Opacity — do not invent intermediate values */
    --opacity-device-watermark: 0.06;
    --opacity-device-graphic: 0.18;
    --opacity-disabled: 0.4;
    --opacity-hover: 0.08;
    --opacity-pressed: 0.12;
    --opacity-scrim: 0.4;

    /* Z-index — seven stops */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-nav: 200;
    --z-overlay: 800;
    --z-modal: 900;
    --z-toast: 1000;

    /* Motion (design system README section 8). Reduced-motion handling in ds.css. */
    --duration-micro: 150ms;
    --duration-standard: 250ms;
    --duration-large: 400ms;
    --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Layout */
    --content-max: 1200px;
    --gutter: var(--space-4);
    /* Rendered height of the site header, kept in sync by main.js. */
    --header-height: 0px;
}

/* Arabic: every text style gets a line-height of at least 1.5 (dots and
   descenders collide otherwise) and never any letter-spacing, which breaks
   the joins between letters. Numeric styles are figures, not text blocks. */
:root:lang(ar) {
    --type-display-lg-leading: 84px;
    --type-display-lg-tracking: normal;
    --type-display-md-leading: 66px;
    --type-display-md-tracking: normal;
    --type-display-sm-leading: 51px;
    --type-display-sm-tracking: normal;
    --type-large-title-leading: 51px;
    --type-title-1-leading: 42px;
    --type-title-2-leading: 33px;
    --type-title-3-leading: 30px;
    --type-headline-leading: 26px;
    --type-subheadline-leading: 23px;
    --type-caption-1-leading: 18px;
    --type-caption-2-leading: 17px;
    --type-label-caps-leading: 17px;
    --type-label-caps-tracking: normal;
}