/* ==========================================================================
   Hesaba — Design tokens (variables.css)
   ========================================================================== */

:root {
    /* Brand + state colors */
    --color-primary: #0C7360;
    --color-primary-hover: #0A5F4F;
    --color-primary-active: #084D40;
    --color-primary-soft: #E6F4EF;
    --color-primary-border: #BFDED4;
    --color-primary-ring: rgba(12, 115, 96, 0.35);

    --color-text: #101828;
    --color-text-muted: #475467;
    --color-text-faint: #667085;

    --color-background: #FFFFFF;
    --color-surface: #F8FAFC;
    --color-surface-alt: #F2F6F5;
    --color-border: #E4E7EC;
    --color-border-strong: #D0D5DD;

    --color-error: #D92D20;
    --color-error-soft: #FEF3F2;
    --color-error-border: #FECDCA;
    --color-success: #067647;
    --color-warning: #DC6803;

    /* Typography */
    --font-primary: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-arabic: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma,
        "Geeza Pro", Arial, sans-serif;

    /* Layout */
    --container: 72rem;
    --container-narrow: 50rem;
    --container-calc: 44rem;
    --section-y: clamp(2.5rem, 6vw, 4.25rem);

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 10px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, 0.14);

    /* Controls */
    --control-height: 3rem;          /* 48px tap-friendly */
    --control-height-lg: 3.5rem;

    /* Motion */
    --transition-fast: 140ms ease;
    --transition-base: 200ms ease;

    /* Z-index */
    --z-header: 40;
    --z-search: 50;
}