/* Design notes: docs/code-notes/app/assets/stylesheets/display_light.md */
:root {
  color-scheme: light;
  --bg: #f5f5fa; --surface: #ffffff; --border: #d6d6e4;
  --accent: #5b47d6; --text: #1c1c2e; --muted: #5b5b70;
  --accent-text: #4b37c2;
  --button-bg: #5b47d6; --button-bg-hover: #4a37bd;
  --focus-ring: #4b37c2;
  --green: #116530; --red: #b42318; --yellow: #8a5a00;
  --pattern-mask: url("/assets/gym-pattern-tile-9e15ed97.png");
  --pattern-tint: rgb(52, 97, 154); --pattern-opacity: .07;
  --code-bg: #f0f0f6; --code-symbol: #6d28d9; --code-builtin: #0b6394;
  --surface-raised: #ededf5; --nav-bg: rgba(255, 255, 255, .86);
  --slot-1: #4b37c2; --slot-2: #0b6680; --slot-3: #8a5a00; --slot-4: #b1236a;
  --shadow: 0 1px 2px rgba(20, 20, 50, .06), 0 6px 20px rgba(20, 20, 50, .07);
  /* Form fields are identified by their border, so it has to reach 3:1. */
  --field-border: #7a7a92;
}

/* Not while focused, so each page's own accent border on focus still shows. */
html :is(textarea, select, .form-field input:not([type="checkbox"], [type="radio"], [type="range"]),
  .duck-input, .follow-up-input, .learn-filter input[type="search"]):not(:focus) { border-color: var(--field-border); }

html :is(.rung-principal_engineer, .rung-developing_principal_engineer) { --rung: var(--accent); }
html :is(.rung-senior, .rung-developing_senior) { --rung: #166534; }
html :is(.rung-mid_level, .rung-developing_mid_level) { --rung: #15803d; }
html :is(.rung-junior, .rung-developing_junior) { --rung: #16a34a; }

html .save-status { box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }