/* ============================================================
   Invoicetronic Desk — Design Tokens
   ============================================================ */

:root {
    /* ── Brand palette ── */
    --brand-primary:     #092B28;
    --brand-accent:      #5BBA91;
    --brand-accent-light:#d1ebe0;
    --brand-bg:          #edf4f1;
    --brand-white:       #ffffff;
    --brand-dark:        #0a1f1d;

    /* ── Semantic colors ── */
    --color-text:        #1a2e2b;
    --color-text-muted:  #5a706c;
    --color-text-inverse:#ffffff;
    --color-border:      rgba(9, 43, 40, 0.08);
    --color-border-strong:rgba(9, 43, 40, 0.16);

    /* ── Status ── */
    --color-success:     #2d9b6a;
    --color-success-bg:  #e6f5ee;
    --color-warning:     #d4930a;
    --color-warning-bg:  #fdf4e0;
    --color-danger:      #c93a3e;
    --color-danger-bg:   #fce8e8;
    --color-info:        #2778c4;
    --color-info-bg:     #e3f0fc;

    /* ── Typography ── */
    --font-ui:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:      'Zain', 'Inter', sans-serif;

    --text-xs:    0.75rem;   /* 12px */
    --text-sm:    0.8125rem; /* 13px */
    --text-base:  0.875rem;  /* 14px */
    --text-md:    1rem;      /* 16px */
    --text-lg:    1.125rem;  /* 18px */
    --text-xl:    1.375rem;  /* 22px */
    --text-2xl:   1.75rem;   /* 28px */

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi:   600;
    --weight-bold:   700;
    --weight-extra:  800;

    --leading-tight: 1.2;
    --leading-normal:1.5;

    /* ── Spacing (8px grid) ── */
    --space-1:  0.25rem;  /* 4px  */
    --space-2:  0.5rem;   /* 8px  */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */

    /* ── Elevation ── */
    --shadow-sm:   0 1px 2px rgba(9, 43, 40, 0.05);
    --shadow-md:   0 2px 8px rgba(9, 43, 40, 0.08);
    --shadow-lg:   0 4px 16px rgba(9, 43, 40, 0.10);
    --shadow-xl:   0 8px 32px rgba(9, 43, 40, 0.12);

    /* ── Radius ── */
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  10px;
    --radius-xl:  16px;
    --radius-full:9999px;

    /* ── Transitions ── */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast:  120ms;
    --duration-normal:200ms;
    --duration-slow:  350ms;

    /* ── Layout ── */
    --navbar-height:  56px;
    --subnav-height:  44px;
    --content-max:    1280px;
    --sidebar-width:  260px;
}