/* ==========================================================
   Toby Bros POS — CSS Custom Properties
   Light + Dark themes. All component colours reference these.
   ========================================================== */

:root {
    /* Brand */
    --brand-primary:     #2E7D32;   /* accessible green text / focus */
    --brand-primary-lt:  #43A047;
    --brand-primary-dk:  #1B5E20;
    --brand-accent:      #8A4700;   /* accessible amber text */
    --brand-accent-lt:   #FFB300;
    --brand-danger:      #B71C1C;
    --brand-danger-lt:   #EF5350;
    --brand-warning:     #A33F00;
    --brand-info:        #00649B;

    /* Layout */
    --header-h:          56px;
    --sidebar-w:         340px;     /* cart panel width */
    --cat-bar-h:         48px;
    --radius:            10px;
    --radius-sm:         6px;
    --radius-lg:         16px;

    /* Spacing */
    --gap:               12px;
    --gap-sm:            6px;
    --gap-lg:            20px;

    /* Typography */
    --font:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:         'SF Mono', 'Fira Code', Consolas, monospace;
    --text-xs:           0.72rem;
    --text-sm:           0.85rem;
    --text-base:         1rem;
    --text-lg:           1.15rem;
    --text-xl:           1.35rem;
    --text-2xl:          1.7rem;
    --text-3xl:          2.2rem;
    --fw-normal:         400;
    --fw-medium:         500;
    --fw-semi:           600;
    --fw-bold:           700;

    /* Transitions */
    --transition:        160ms ease;
    --transition-slow:   300ms ease;

    /* Z-index layers */
    --z-modal:           1000;
    --z-overlay:         900;
    --z-toast:           1100;
    --z-header:          100;
}

/* ========== LIGHT THEME (default) ========== */
[data-theme="light"], :root {
    --bg:            #F0F4F0;
    --bg-2:          #E8EEE8;
    --surface:       #FFFFFF;
    --surface-2:     #F5F8F5;
    --surface-3:     #EDF2ED;
    --border:        #D6E0D6;
    --border-2:      #C8D5C8;
    --border-strong: #718771;

    --text-primary:  #1A2E1A;
    --text-secondary:#40563E;
    --text-muted:    #5E7358;
    --text-inverse:  #FFFFFF;

    --tile-bg:       #FFFFFF;
    --tile-hover:    #F0F8F0;
    --tile-active:   #E0F0E0;
    --tile-border:   #D0E4D0;

    --cart-bg:       #FFFFFF;
    --cart-header:   #2E7D32;
    --cart-item-odd: #F8FBF8;
    --cart-item-even:#FFFFFF;
    --cart-total-bg: #F0F8F0;

    --input-bg:      #FFFFFF;
    --input-border:  #B8CCB8;
    --input-focus:   #2E7D32;

    --btn-primary-bg:    #2E7D32;
    --btn-primary-text:  #FFFFFF;
    --btn-secondary-bg:  #FFFFFF;
    --btn-secondary-text:#2E7D32;
    --btn-secondary-border:#2E7D32;
    --btn-danger-bg:     #B71C1C;
    --btn-danger-text:   #FFFFFF;
    --btn-warning-bg:    #A33F00;
    --btn-warning-text:  #FFFFFF;
    --btn-disabled-bg:   #C8D5C8;
    --btn-disabled-text: #5E7358;

    --header-bg:     #2E7D32;
    --header-text:   #FFFFFF;
    --header-border: #1B5E20;

    --modal-bg:      #FFFFFF;
    --modal-overlay: rgba(0,0,0,0.5);
    --modal-header:  #2E7D32;
    --modal-header-text: #FFFFFF;

    --tag-gst-free:  #E8F5E9;
    --tag-gst-free-text: #2E7D32;
    --tag-member:    #FFF8E1;
    --tag-member-text: #8A4700;

    --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
    --shadow:        0 2px 8px rgba(0,0,0,0.10);
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.14);

    --online-color:  #2E7D32;
    --offline-color: #C62828;
    --toast-success: #2E7D32;
    --toast-error:   #C62828;
    --toast-warning: #A33F00;
    --toast-info:    #0277BD;
}

/* ========== DARK THEME ========== */
[data-theme="dark"] {
    --brand-primary:     #81C784;
    --brand-accent:      #FFB74D;
    --brand-danger:      #FF8A80;
    --brand-warning:     #FFAB70;
    --brand-info:        #64B5F6;
    --bg:            #0F1A0F;
    --bg-2:          #162016;
    --surface:       #1E2E1E;
    --surface-2:     #243824;
    --surface-3:     #2A3E2A;
    --border:        #304830;
    --border-2:      #3A563A;
    --border-strong: #789878;

    --text-primary:  #E8F0E8;
    --text-secondary:#A8C8A8;
    --text-muted:    #82A482;
    --text-inverse:  #0F1A0F;

    --tile-bg:       #1E2E1E;
    --tile-hover:    #243824;
    --tile-active:   #2A4A2A;
    --tile-border:   #304830;

    --cart-bg:       #162016;
    --cart-header:   #1B5E20;
    --cart-item-odd: #1E2E1E;
    --cart-item-even:#162016;
    --cart-total-bg: #1E341E;

    --input-bg:      #243824;
    --input-border:  #3A563A;
    --input-focus:   #43A047;

    --btn-primary-bg:    #2E7D32;
    --btn-primary-text:  #FFFFFF;
    --btn-secondary-bg:  #243824;
    --btn-secondary-text:#A8C8A8;
    --btn-secondary-border:#3A563A;
    --btn-danger-bg:     #B71C1C;
    --btn-danger-text:   #FFFFFF;
    --btn-warning-bg:    #BF360C;
    --btn-warning-text:  #FFFFFF;
    --btn-disabled-bg:   #2A3E2A;
    --btn-disabled-text: #4A6A4A;

    --header-bg:     #1B5E20;
    --header-text:   #E8F0E8;
    --header-border: #0F3A0F;

    --modal-bg:      #1E2E1E;
    --modal-overlay: rgba(0,0,0,0.75);
    --modal-header:  #1B5E20;
    --modal-header-text: #E8F0E8;

    --tag-gst-free:  #1B3A1B;
    --tag-gst-free-text: #81C784;
    --tag-member:    #3A2E00;
    --tag-member-text: #FFB300;

    --shadow-sm:     0 1px 3px rgba(0,0,0,0.3);
    --shadow:        0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.6);
}