/*
 * theme.css
 * Design tokens built on Open Props.
 * Material Design 3 color system mapped to CSS custom properties.
 * Override these to retheme the entire application.
 */

:root {
  /* ── Brand colors (swap these for your palette) ── */
  --color-primary:          #1a73e8;
  --color-primary-dark:     #1557b0;
  --color-primary-light:    #e8f0fe;
  --color-on-primary:       #ffffff;

  --color-secondary:        #34a853;
  --color-on-secondary:     #ffffff;

  --color-error:            #d93025;
  --color-on-error:         #ffffff;

  --color-surface:          #ffffff;
  --color-surface-variant:  #f8f9fa;
  --color-on-surface:       #202124;
  --color-on-surface-muted: #5f6368;

  --color-outline:          #dadce0;

  /* ── Typography ── */
  --font-display: 'Google Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Roboto', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Roboto Mono', 'Consolas', monospace;

  /* ── Spacing (inherits Open Props --size-*) ── */
  --app-bar-height:    64px;
  --sidebar-width:     240px;
  --content-max-width: 1200px;

  /* ── Elevation shadows ── */
  --shadow-card:     0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-elevated: 0 4px 6px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);

  /* ── Radii ── */
  --radius-card:   var(--radius-3);
  --radius-chip:   var(--radius-round);
  --radius-dialog: var(--radius-4);

  /* ── Transitions ── */
  --transition-standard: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Force light mode globally ── */
  color-scheme: light;

  /* ── Material Web Components: brand color tokens ── */
  --md-sys-color-primary:                   var(--color-primary);
  --md-sys-color-on-primary:                var(--color-on-primary);
  --md-sys-color-secondary:                 var(--color-secondary);
  --md-sys-color-on-secondary:              var(--color-on-secondary);
  --md-sys-color-error:                     var(--color-error);

  /* ── Material Web Components: force light mode surface tokens ── */
  --md-sys-color-surface:                   #ffffff;
  --md-sys-color-on-surface:                #202124;
  --md-sys-color-surface-variant:           #f8f9fa;
  --md-sys-color-on-surface-variant:        #444746;
  --md-sys-color-background:                #ffffff;
  --md-sys-color-on-background:             #202124;
  --md-sys-color-surface-container:         #ffffff;
  --md-sys-color-surface-container-high:    #f8f9fa;
  --md-sys-color-surface-container-highest: #f1f3f4;
  --md-sys-color-surface-container-low:     #ffffff;
  --md-sys-color-surface-container-lowest:  #ffffff;

  /* ── Material Web Components: typography ── */
  --md-ref-typeface-brand: var(--font-display);
  --md-ref-typeface-plain: var(--font-body);
}

/* Force light mode on all MWC components individually as a fallback */
md-filled-button, md-text-button, md-outlined-button,
md-outlined-text-field, md-filled-text-field,
md-outlined-select, md-filled-select,
md-dialog, md-icon-button, md-checkbox,
md-circular-progress, md-linear-progress {
  color-scheme: light;
}

body {
  background-color: #ffffff;
  color: #202124;
}