/*
 * alburhansoft design tokens
 * Keep shared design values here; theme and component styles consume these tokens.
 * Local WOFF2 fonts can be added under assets/fonts when licensed files are available.
 */
:root {
    /* Brand palette */
    --abs-color-navy-900: #071a33;
    --abs-color-blue-600: #1264e8;
    --abs-color-blue-700: #0d55c9;
    --abs-color-blue-500: #2b7fff;
    --abs-color-cyan-500: #18b9f2;
    --abs-color-white: #ffffff;
    --abs-color-surface-0: #ffffff;
    --abs-color-surface-50: #f7f9fc;
    --abs-color-ink-900: #0b1220;
    --abs-color-slate-600: #5e6b7a;
    --abs-color-border-200: #e3e8ef;

    /* Status palette */
    --abs-color-success-700: #147a52;
    --abs-color-success-50: #ecfdf3;
    --abs-color-warning-700: #8a5a00;
    --abs-color-warning-50: #fff7e6;
    --abs-color-danger-700: #b42318;
    --abs-color-danger-50: #fef3f2;

    /* Semantic colors */
    --abs-bg: var(--abs-color-surface-0);
    --abs-surface: var(--abs-color-surface-0);
    --abs-surface-soft: var(--abs-color-surface-50);
    --abs-text: var(--abs-color-ink-900);
    --abs-text-muted: var(--abs-color-slate-600);
    --abs-border: var(--abs-color-border-200);
    --abs-primary: var(--abs-color-blue-600);
    --abs-primary-hover: var(--abs-color-blue-700);
    --abs-navy: var(--abs-color-navy-900);
    --abs-cyan: var(--abs-color-cyan-500);
    --abs-focus: var(--abs-color-cyan-500);
    --abs-on-primary: var(--abs-color-white);
    --abs-status-success: var(--abs-color-success-700);
    --abs-status-success-bg: var(--abs-color-success-50);
    --abs-status-warning: var(--abs-color-warning-700);
    --abs-status-warning-bg: var(--abs-color-warning-50);
    --abs-status-danger: var(--abs-color-danger-700);
    --abs-status-danger-bg: var(--abs-color-danger-50);

    /* Footer surfaces keep their established high-contrast treatment. */
    --abs-footer-text-strong: var(--abs-color-white);
    --abs-footer-text: rgba(255, 255, 255, 0.72);
    --abs-footer-text-soft: rgba(255, 255, 255, 0.78);
    --abs-footer-text-muted: rgba(255, 255, 255, 0.58);
    --abs-footer-border: rgba(255, 255, 255, 0.12);
    --abs-footer-chip-border: rgba(255, 255, 255, 0.16);
    --abs-footer-chip-border-hover: rgba(255, 255, 255, 0.34);
    --abs-footer-chip-hover: rgba(255, 255, 255, 0.08);

    /* Typography */
    --abs-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --abs-font-latin: "Inter", "Segoe UI", Arial, sans-serif;
    --abs-font-size-xs: 0.75rem;
    --abs-font-size-sm: 0.875rem;
    --abs-font-size-base: 1.0625rem;
    --abs-font-size-lg: 1.125rem;
    --abs-font-size-xl: 1.25rem;
    --abs-font-size-action: 0.9375rem;
    --abs-font-size-caption: 0.8125rem;
    --abs-font-size-footer-title: 1rem;
    --abs-font-size-navigation: 0.9375rem;
    --abs-font-size-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --abs-font-size-3xl: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
    --abs-font-size-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
    --abs-font-weight-regular: 400;
    --abs-font-weight-medium: 500;
    --abs-font-weight-semibold: 600;
    --abs-font-weight-bold: 700;
    --abs-line-height-body: 1.7;
    --abs-line-height-heading: 1.25;
    --abs-line-height-compact: 1.45;

    /* Spacing scale */
    --abs-space-1: 0.25rem;
    --abs-space-2: 0.5rem;
    --abs-space-3: 0.75rem;
    --abs-space-4: 1rem;
    --abs-space-5: 1.25rem;
    --abs-space-6: 1.5rem;
    --abs-space-7: 1.75rem;
    --abs-space-8: 2rem;
    --abs-space-10: 2.5rem;
    --abs-space-12: 3rem;
    --abs-space-16: 4rem;
    --abs-space-20: 5rem;
    --abs-space-24: 6rem;

    /* Layout, controls, and shape */
    --abs-container: 77.5rem;
    --abs-container-gutter: 2.5rem;
    --abs-header-height: 5.125rem;
    --abs-action-height: 2.75rem;
    --abs-action-padding-block: 0.5625rem;
    --abs-action-padding-inline: 1.0625rem;
    --abs-header-logo-width: 12.8125rem;
    --abs-header-logo-width-tablet: 11.5625rem;
    --abs-header-logo-width-mobile: 10.375rem;
    --abs-footer-logo-width: 13.75rem;
    --abs-icon-button-size: 2.625rem;
    --abs-menu-toggle-size: 2.5rem;
    --abs-icon-size: 1.1875rem;
    --abs-control-height: 3rem;
    --abs-radius-xs: 0.375rem;
    --abs-radius-sm: 0.625rem;
    --abs-radius-md: 0.875rem;
    --abs-radius-lg: 1.25rem;
    --abs-radius-pill: 999px;

    /* Elevation and motion */
    --abs-shadow: 0 0.5rem 1.875rem rgba(7, 26, 51, 0.08);
    --abs-shadow-header: 0 0.375rem 1.5rem rgba(7, 26, 51, 0.06);
    --abs-shadow-primary: 0 0.4375rem 1.125rem rgba(18, 100, 232, 0.18);
    --abs-transition: 180ms ease;
    --abs-transition-fast: 120ms ease;
    --abs-focus-width: 3px;
    --abs-focus-offset: 3px;
    --abs-disabled-opacity: 0.56;

    /* Layer scale */
    --abs-z-base: 1;
    --abs-z-header: 1000;
    --abs-z-dropdown: 1001;
    --abs-z-skip-link: 10000;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --abs-bg: #07111f;
    --abs-surface: #0d1a2b;
    --abs-surface-soft: #102137;
    --abs-text: #f5f8fc;
    --abs-text-muted: #aab7c7;
    --abs-border: #24354a;
    --abs-primary: #2b7fff;
    --abs-primary-hover: #4a91ff;
    --abs-navy: #06101d;
    --abs-cyan: #20c4ff;
    --abs-focus: #20c4ff;
    --abs-status-success: #6bd6a2;
    --abs-status-success-bg: #123328;
    --abs-status-warning: #ffd27a;
    --abs-status-warning-bg: #3a2d13;
    --abs-status-danger: #ff9b91;
    --abs-status-danger-bg: #3b1f22;
}