/* ================================================================
   EasyRetail — Design Tokens
   Service-desk / workshop aesthetic. All components use these.
   Per-tenant overrides: only --color-primary / --color-primary-*
   are injected inline by MasterPage from BranchDetails.
   ================================================================ */

:root {
    /* ---------- Brand (overridable per tenant) ---------- */
    --color-primary:         #0F766E;
    --color-primary-hover:   #0E6B63;
    --color-primary-active:  #0B544D;
    --color-primary-soft:    #CCFBF1;
    --color-primary-contrast:#FFFFFF;

    /* ---------- Neutrals ---------- */
    --color-bg:              #F5F6F8;
    --color-surface:         #FFFFFF;
    --color-surface-alt:     #F9FAFB;
    --color-surface-sunken:  #EEF0F3;

    --color-border:          #E5E7EB;
    --color-border-strong:   #D1D5DB;

    --color-text:            #111827;
    --color-text-muted:      #6B7280;
    --color-text-subtle:     #9CA3AF;
    --color-text-on-primary: #FFFFFF;

    /* ---------- Semantic (status) ---------- */
    --color-success:         #15803D;
    --color-success-soft:    #DCFCE7;
    --color-success-contrast:#FFFFFF;

    --color-warning:         #B45309;
    --color-warning-soft:    #FEF3C7;
    --color-warning-contrast:#FFFFFF;

    --color-danger:          #B91C1C;
    --color-danger-soft:     #FEE2E2;
    --color-danger-contrast: #FFFFFF;

    --color-info:            #1D4ED8;
    --color-info-soft:       #DBEAFE;
    --color-info-contrast:   #FFFFFF;

    --color-neutral:         #4B5563;
    --color-neutral-soft:    #F3F4F6;

    /* ---------- Order lifecycle (service-desk specific) ---------- */
    /* 0: Νέα παραλαβή · 1: Μερικώς έτοιμο · 2: Πλήρως έτοιμο · 3: Μερική παράδοση · 4: Ολοκληρωμένη */
    --status-new-bg:         var(--color-info-soft);
    --status-new-fg:         var(--color-info);
    --status-partial-bg:     var(--color-warning-soft);
    --status-partial-fg:     var(--color-warning);
    --status-ready-bg:       var(--color-success-soft);
    --status-ready-fg:       var(--color-success);
    --status-delivered-bg:   var(--color-neutral-soft);
    --status-delivered-fg:   var(--color-neutral);
    --status-cancelled-bg:   var(--color-danger-soft);
    --status-cancelled-fg:   var(--color-danger);

    /* ---------- Spacing (4px base) ---------- */
    --space-0:   0;
    --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;

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

    /* ---------- Typography ---------- */
    --font-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-xs:    0.75rem;   /* 12 */
    --text-sm:    0.8125rem; /* 13 */
    --text-base:  0.875rem;  /* 14 */
    --text-md:    1rem;      /* 16 */
    --text-lg:    1.125rem;  /* 18 */
    --text-xl:    1.25rem;   /* 20 */
    --text-2xl:   1.5rem;    /* 24 */
    --text-3xl:   1.875rem;  /* 30 */

    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-semi:    600;
    --font-weight-bold:    700;

    --line-tight:   1.2;
    --line-normal:  1.45;
    --line-relaxed: 1.65;

    /* ---------- Shadows ---------- */
    --shadow-xs:   0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-sm:   0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow:      0 4px 8px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
    --shadow-md:   0 8px 16px rgba(17, 24, 39, 0.08), 0 4px 6px rgba(17, 24, 39, 0.04);
    --shadow-lg:   0 16px 32px rgba(17, 24, 39, 0.10), 0 8px 12px rgba(17, 24, 39, 0.06);

    --ring-focus:  0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);

    /* ---------- Layout ---------- */
    --header-height:    64px;
    --sidebar-width:    232px;
    --sidebar-width-collapsed: 72px;
    --content-max:      1200px;

    /* ---------- Motion ---------- */
    --duration-fast:   120ms;
    --duration:        200ms;
    --duration-slow:   320ms;
    --ease-standard:   cubic-bezier(0.2, 0, 0, 1);

    /* ---------- Z-index ---------- */
    --z-sticky:   100;
    --z-drawer:   200;
    --z-dropdown: 300;
    --z-modal:    400;
    --z-toast:    500;
}

/* color-mix fallback for older browsers (safe no-op default) */
@supports not (background: color-mix(in srgb, red, blue)) {
    :root {
        --ring-focus: 0 0 0 3px rgba(15, 118, 110, 0.35);
    }
}