/* Terra design tokens: the single source of colour, type, space and shape for WebEngine and WebAndroidApp.
   The theme is chosen by data-theme="light|dark" on <html>. An inline script in each app sets it before first paint
   (saved choice, else the device setting). Text pairs below meet WCAG AA (4.5:1; 3:1 for large text and UI). */

:root {
    color-scheme: light;

    /* Brand accents. Primary is the one action colour; the logo purple is for the logo and app icon only. */
    --terra-primary:        #0d6efd;
    --terra-primary-hover:  #0b5ed7;
    --terra-on-primary:     #ffffff;
    --terra-danger:         #dc3545;
    --terra-danger-hover:   #bb2d3b;
    --terra-danger-text:    #b02a37;
    --terra-success:        #198754;
    --terra-success-text:   #146c43;
    --terra-warning:        #ffc107;
    --terra-warning-bg:     #fff6c7;
    --terra-warning-text:   #7a5b00;

    /* Surfaces */
    --terra-bg-page:           #f0f2f5;
    --terra-bg-surface:        #ffffff;
    --terra-bg-surface-deep:   #f8f9fa;
    --terra-bg-surface-header: #f0f2f5;
    --terra-bg-raised:         #e9ecef;
    --terra-bg-hover:          #dee2e6;
    --terra-bg-selected:       #dbe7ff;
    --terra-backdrop:          rgba(0, 0, 0, 0.45);

    /* Lines */
    --terra-border:         #dee2e6;
    --terra-border-subtle:  #e9ecef;
    --terra-border-strong:  #adb5bd;

    /* Text */
    --terra-text-primary:   #212529;
    --terra-text-secondary: #343a40;
    --terra-text-body:      #495057;
    --terra-text-muted:     #5b6472;
    --terra-text-label:     #5b6472;
    --terra-text-link:      #0d6efd;

    /* Top bar and bottom bar */
    --terra-navbar-bg:      #ffffff;
    --terra-navbar-text:    #212529;
    --terra-navbar-border:  #dee2e6;

    /* Elevation and focus */
    --terra-shadow-md:      rgba(0, 0, 0, 0.10);
    --terra-shadow-sm:      rgba(0, 0, 0, 0.07);
    --terra-focus-ring:     0 0 0 3px rgba(13, 110, 253, 0.30);

    /* Shape */
    --terra-radius-sm:      6px;
    --terra-radius-md:      10px;
    --terra-radius-lg:      12px;
    --terra-radius-pill:    999px;

    /* Type */
    --terra-font:           Rubik, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --terra-fs-xs:          0.75rem;
    --terra-fs-sm:          0.875rem;
    --terra-fs-md:          1rem;
    --terra-fs-lg:          1.25rem;
    --terra-fs-xl:          1.5rem;

    /* Space (4px grid) */
    --terra-space-1:        0.25rem;
    --terra-space-2:        0.5rem;
    --terra-space-3:        0.75rem;
    --terra-space-4:        1rem;
    --terra-space-5:        1.5rem;
    --terra-space-6:        2rem;

    /* Controls: big for fingers, tighter for a mouse */
    --terra-control-h:      3rem;
    --terra-touch-min:      48px;
}

:root[data-theme="dark"],
:root.erp-dark {   /* WebEngine marks its dark mode with this class */
    color-scheme: dark;

    --terra-primary-hover:  #3d8bfd;
    --terra-danger-text:    #ff8a8a;
    --terra-danger-hover:   #e35d6a;
    --terra-success:        #20c997;
    --terra-success-text:   #5fd3a6;
    --terra-warning-bg:     #3d3200;
    --terra-warning-text:   #ffca2c;

    --terra-bg-page:           #121212;
    --terra-bg-surface:        #2b2b2b;
    --terra-bg-surface-deep:   #1e1e1e;
    --terra-bg-surface-header: #222222;
    --terra-bg-raised:         #3a3a3a;
    --terra-bg-hover:          #454545;
    --terra-bg-selected:       #1f3a66;
    --terra-backdrop:          rgba(0, 0, 0, 0.65);

    --terra-border:         #3a3a3a;
    --terra-border-subtle:  #353535;
    --terra-border-strong:  #6c757d;

    --terra-text-primary:   #f0f0f0;
    --terra-text-secondary: #e0e0e0;
    --terra-text-body:      #dee2e6;
    --terra-text-muted:     #adb5bd;
    --terra-text-label:     #adb5bd;
    --terra-text-link:      #6ea8fe;

    --terra-navbar-bg:      #212529;
    --terra-navbar-text:    #f8f9fa;
    --terra-navbar-border:  transparent;

    --terra-shadow-md:      rgba(0, 0, 0, 0.35);
    --terra-shadow-sm:      rgba(0, 0, 0, 0.28);
    --terra-focus-ring:     0 0 0 3px rgba(110, 168, 254, 0.45);
}

@media (hover: hover) and (pointer: fine) {
    :root {
        --terra-control-h:  2.5rem;
        --terra-touch-min:  36px;
    }
}