/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * OFE design tokens.
 *
 * Material 3 system tokens (--md-sys-*) for a light scheme, plus the four
 * status colours Material 3 does not define (--ofe-sys-color-*). Only the
 * tokens that shell.css and components.css read are defined here; add a
 * token when a component needs it.
 *
 * Custom properties paint nothing on their own, so defining them on :root is
 * safe for pages that do not use the new shell.
 *
 * Light scheme only. A dark scheme would redefine the colour roles below
 * under a prefers-color-scheme media query.
 */

:root {
  /*
   * Colour roles: a Material 3 light scheme generated from the seed colour
   * #0b5cbf with Google's Material color utilities
   * (@material/material-color-utilities 0.4.0, themeFromSourceColor). The
   * surface-container roles are tones 96, 94, 92 and 90 of the same theme's
   * neutral palette.
   */
  --md-sys-color-primary: #085bbe;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d8e2ff;
  --md-sys-color-on-primary-container: #001a41;
  --md-sys-color-secondary-container: #dbe2f9;
  --md-sys-color-on-secondary-container: #131b2c;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #fefbff;
  --md-sys-color-on-surface: #1b1b1f;
  --md-sys-color-on-surface-variant: #44474f;
  --md-sys-color-surface-container-low: #f5f3f7;
  --md-sys-color-surface-container: #efedf1;
  --md-sys-color-surface-container-high: #e9e7ec;
  --md-sys-color-surface-container-highest: #e3e2e6;
  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6d0;

  /*
   * Status colours outside the Material 3 roles. The status chips and message
   * banners need "succeeded" and "needs attention" to read differently from
   * primary and error. Each foreground keeps at least 4.5:1 contrast on its
   * container.
   */
  --ofe-sys-color-success: #146c2e;
  --ofe-sys-color-success-container: #c4eed0;
  --ofe-sys-color-warning: #6d5000;
  --ofe-sys-color-warning-container: #ffdf9e;

  /* Shape: Material 3 corner scale. */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-full: 9999px;

  /* Elevation used by the menu surface. */
  --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);

  /* Motion: Material 3 durations and the standard easing curve. */
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
}