/**
 * KSeF Invoice Tracker — Design System
 * Mobile-first | Light/Dark mode via prefers-color-scheme
 * 
 * Aesthetic: Professional government/institutional — clean, legible,
 * structured. Inspired by Polish government digital services.
 * Font: Source Sans 3 (professional, excellent Polish diacritics)
 */

/* ── Google Fonts ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — LIGHT MODE (default)
   ══════════════════════════════════════════════ */
:root {
    /* ── Typography ──────────────────────────── */
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ── Spacing scale ───────────────────────── */
    --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 */
    --space-16: 4rem;      /* 64px */

    /* ── Color palette — Light ───────────────── */
    --color-primary:       #1E40AF;
    --color-primary-hover: #1E3A8A;
    --color-primary-light: #DBEAFE;
    --color-primary-faint: #EFF6FF;

    --color-accent:        #0F766E;
    --color-accent-light:  #CCFBF1;

    --color-danger:        #B91C1C;
    --color-danger-light:  #FEE2E2;
    --color-danger-hover:  #991B1B;

    --color-warning:       #A16207;
    --color-warning-light: #FEF3C7;

    --color-success:       #15803D;
    --color-success-light: #DCFCE7;

    /* ── Surfaces ────────────────────────────── */
    --bg-body:       #F1F5F9;
    --bg-surface:    #FFFFFF;
    --bg-surface-2:  #F8FAFC;
    --bg-surface-3:  #F1F5F9;
    --bg-sidebar:    #1E293B;
    --bg-sidebar-hover: #334155;
    --bg-sidebar-active: #0F172A;

    /* ── Text ────────────────────────────────── */
    --text-primary:   #0F172A;
    --text-secondary: #475569;
    --text-tertiary:  #94A3B8;
    --text-inverse:   #F8FAFC;
    --text-sidebar:   #CBD5E1;
    --text-sidebar-active: #FFFFFF;
    --text-link:      #1D4ED8;

    /* ── Borders ─────────────────────────────── */
    --border-color:   #E2E8F0;
    --border-strong:  #CBD5E1;
    --border-focus:   #3B82F6;
    --border-radius:  0.5rem;    /* 8px */
    --border-radius-sm: 0.375rem; /* 6px */
    --border-radius-lg: 0.75rem;  /* 12px */
    --border-radius-xl: 1rem;     /* 16px */

    /* ── Shadows ──────────────────────────────── */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

    /* ── Layout ───────────────────────────────── */
    --sidebar-width:     260px;
    --sidebar-collapsed: 64px;
    --topbar-height:     60px;
    --content-max-width: 1280px;

    /* ── Transitions ──────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* ── Z-index ──────────────────────────────── */
    --z-sidebar:  100;
    --z-topbar:   110;
    --z-overlay:  200;
    --z-modal:    300;
    --z-toast:    400;
}

/* ══════════════════════════════════════════════
   DARK MODE — auto via system preference
   ══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary:       #60A5FA;
        --color-primary-hover: #93C5FD;
        --color-primary-light: #1E3A5F;
        --color-primary-faint: #172554;

        --color-accent:        #5EEAD4;
        --color-accent-light:  #134E4A;

        --color-danger:        #FCA5A5;
        --color-danger-light:  #450A0A;
        --color-danger-hover:  #F87171;

        --color-warning:       #FCD34D;
        --color-warning-light: #451A03;

        --color-success:       #86EFAC;
        --color-success-light: #052E16;

        --bg-body:       #0F172A;
        --bg-surface:    #1E293B;
        --bg-surface-2:  #1E293B;
        --bg-surface-3:  #334155;
        --bg-sidebar:    #020617;
        --bg-sidebar-hover: #1E293B;
        --bg-sidebar-active: #1E3A5F;

        --text-primary:   #F1F5F9;
        --text-secondary: #94A3B8;
        --text-tertiary:  #64748B;
        --text-inverse:   #0F172A;
        --text-sidebar:   #94A3B8;
        --text-sidebar-active: #F1F5F9;
        --text-link:      #60A5FA;

        --border-color:   #334155;
        --border-strong:  #475569;
        --border-focus:   #60A5FA;

        --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
        --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    }
}

/* Also support manual toggle via data attribute */
[data-theme="dark"] {
    --color-primary:       #60A5FA;
    --color-primary-hover: #93C5FD;
    --color-primary-light: #1E3A5F;
    --color-primary-faint: #172554;

    --color-accent:        #5EEAD4;
    --color-accent-light:  #134E4A;

    --color-danger:        #FCA5A5;
    --color-danger-light:  #450A0A;
    --color-danger-hover:  #F87171;

    --color-warning:       #FCD34D;
    --color-warning-light: #451A03;

    --color-success:       #86EFAC;
    --color-success-light: #052E16;

    --bg-body:       #0F172A;
    --bg-surface:    #1E293B;
    --bg-surface-2:  #1E293B;
    --bg-surface-3:  #334155;
    --bg-sidebar:    #020617;
    --bg-sidebar-hover: #1E293B;
    --bg-sidebar-active: #1E3A5F;

    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary:  #64748B;
    --text-inverse:   #0F172A;
    --text-sidebar:   #94A3B8;
    --text-sidebar-active: #F1F5F9;
    --text-link:      #60A5FA;

    --border-color:   #334155;
    --border-strong:  #475569;
    --border-focus:   #60A5FA;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}