/* ============================================================
   Setred Design Tokens
   Brand: Navy #002850 · Medium Blue #2472b3
   Theme: Light / Clinical
   ============================================================ */

:root {
    /* --- Brand colors --- */
    --color-primary:        #002850;
    --color-medium-blue:    #2472b3;
    --color-primary-hover:  #003a73;
    --color-accent:         #2472b3;

    /* --- Surfaces --- */
    --color-background:     #faf9f6;
    --color-surface:        #ffffff;
    --color-surface-raised: #f0f2f4;
    --color-border:         #dde2e7;

    /* --- Semantic status --- */
    --color-success:        #2e7d32;
    --color-success-muted:  #e8f5e9;
    --color-warning:        #e65100;
    --color-warning-muted:  #fff3e0;
    --color-danger:         #c62828;
    --color-danger-muted:   #ffebee;
    --color-info:           #0277bd;

    /* --- Text --- */
    --color-text-primary:   #1a1f2e;
    --color-text-secondary: #5a6478;
    --color-text-muted:     #8c95a6;
    --color-text-on-primary: #ffffff;

    /* --- Font --- */
    --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;

    /* --- Font sizes --- */
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;

    /* --- Font weights --- */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* --- Line heights --- */
    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* --- Spacing --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

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

    /* --- Shadows --- */
    --shadow-sm:  0 1px 3px rgba(0, 40, 80, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 40, 80, 0.10);
    --shadow-lg:  0 8px 32px rgba(0, 40, 80, 0.15);
    --shadow-dialog: 0 8px 32px rgba(0, 40, 80, 0.15);

    /* ============================================================
       Radzen CSS variable overrides
       Maps Radzen's own vars onto our design tokens so that all
       Radzen components (buttons, inputs, grids, datepickers, etc.)
       automatically use brand colors without per-component changes.
       ============================================================ */

    /* Primary */
    --rz-primary:                    var(--color-primary);
    --rz-primary-lighter:            var(--color-primary-hover);
    --rz-primary-light:              var(--color-primary-hover);
    --rz-primary-dark:               var(--color-primary);
    --rz-on-primary:                 var(--color-text-on-primary);

    /* Base surfaces (light theme equivalents for dark-variable references) */
    --rz-base-background-color:      var(--color-background);
    --rz-body-background-color:      var(--color-background);
    --rz-card-background-color:      var(--color-surface);
    --rz-panel-background-color:     var(--color-surface);

    /* Text */
    --rz-text-color:                 var(--color-text-primary);
    --rz-text-secondary-color:       var(--color-text-secondary);

    /* Font */
    --rz-base-font-family:           var(--font-sans);
    --rz-body-font-family:           var(--font-sans);

    /* Border */
    --rz-border-radius:              var(--radius-sm);

    /* Status colors */
    --rz-success:                    var(--color-success);
    --rz-warning:                    var(--color-warning);
    --rz-danger:                     var(--color-danger);
    --rz-info:                       var(--color-info);
    --rz-on-success:                 #ffffff;
    --rz-on-warning:                 #ffffff;
    --rz-on-danger:                  #ffffff;
    --rz-on-info:                    #ffffff;
}

/* ============================================================
   Base typography
   ============================================================ */

html,
body {
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }