/* wewrimo v1.2: additive design tokens, not component implementation.
   Integrate into app/assets/tokens.css. Existing --color-* values stay intact.
   Navigation breakpoint: 700px (literal media-query value; CSS var() is not
   supported as a normal media-query threshold). Light palette only.
   Existing font-face remains in the application; no new font request here. */
@layer base {
  :root {
    --ww-shadow-neutral-pressed: inset 0 2px 3px #20202014,inset 0 -1px 0 #FFFFFFB3;
    --ww-shadow-neutral-hover: inset 0 0 0 1px #FFFFFF99,0 1px 2px #20202014;
    --ww-shadow-neutral: inset 0 0 0 1px #FFFFFF99,inset 0 -2px 1px #20202008,0 1px 1px #2020200A;
    --ww-contour-thumb-face: linear-gradient(180deg,#FCFCFA,#EDEFE8);
    --ww-contour-neutral-face: linear-gradient(180deg,#FCFCFA,#F3F4F0);
    --ww-contour-action-face: linear-gradient(180deg,#FFDA52,#FFD233 55%,#F3C62D);
    --ww-contour-neutral-edge: #858A8059;
    --ww-contour-action-edge: #9A7D2033;
    --ww-page: var(--color-surface, #F7F8F5);
    --ww-content: var(--color-canvas, #FFFFFF);
    --ww-text: var(--color-text, #202020);
    --ww-text-secondary: var(--color-text-secondary, #62665F);
    --ww-border: var(--color-border, #E4E6E0);
    --ww-control-border: var(--color-control-border, #858A80);
    --ww-action: var(--color-action, #FFD233);
    --ww-action-hover: var(--color-action-hover, #F2C425);
    --ww-action-tint: var(--color-action-tint, #FFFBEB);
    --ww-progress: var(--color-progress, #278567);
    --ww-progress-ink: var(--color-progress-ink, #416B5D);
    --ww-progress-tint: var(--color-progress-tint, #EAF3EE);
    --ww-action-pressed: #E6B91F;
    --ww-danger: #B3261E;
    --ww-warning: #8A5200;
    --ww-font-interface: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ww-font-editorial: "Newsreader", Georgia, serif;
    --ww-font-body: 1rem;
    --ww-line-body: 1.5rem;
    --ww-font-small: 0.875rem;
    --ww-line-small: 1.25rem;
    --ww-font-title: 1.5rem;
    --ww-line-title: 1.875rem;
    --ww-font-title-wide: 1.75rem;
    --ww-line-title-wide: 2.125rem;
    --ww-font-editorial-min: 2.25rem;
    --ww-font-editorial-max: 3rem;
    --ww-font-input-min: max(1rem, 16px);
    --ww-space-1: 0.25rem;
    --ww-space-2: 0.5rem;
    --ww-space-3: 0.75rem;
    --ww-space-4: 1rem;
    --ww-space-6: 1.5rem;
    --ww-space-8: 2rem;
    --ww-space-12: 3rem;
    --ww-radius-control: 0.5rem;
    --ww-radius-panel: 0.75rem;
    --ww-radius-dialog: 1rem;
    --ww-target-min: 44px;
    --ww-input-min-height: 48px;
    --ww-header-min-height: 56px;
    --ww-progress-trigger-width: 86px;
    --ww-form-max: 40rem;
    --ww-chart-max: 60rem;
    --ww-browse-max: 72rem;
    --ww-focus-width: 2px;
    --ww-focus-offset: 2px;
    --ww-duration-feedback: 120ms;
    --ww-duration-panel: 180ms;
    --ww-shadow-overlay: 0 8px 24px #20202014;
    --ww-depth-wash: var(--ww-contour-action-face);
    --ww-shadow-control: inset 0 0 0 1px #FFF5BB66,inset 0 -2px 1px #8C6B1110,0 1px 1px #2020200A;
    --ww-shadow-control-hover: inset 0 0 0 1px #FFF5BB80,inset 0 -2px 1px #8C6B1110,0 1px 2px #20202014;
    --ww-shadow-control-pressed: inset 0 2px 3px #6B511329,inset 0 -1px 0 #FFF5BB66;
    --ww-shadow-field: inset 0 1px 2px #20202018,inset 0 -1px 0 #FFFFFFCC;
    --ww-shadow-track: inset 0 1px 2px #20202033,inset 0 -1px 0 #FFFFFF33;
    --ww-shadow-thumb: 0 0 0 1px #20202022,inset 0 0 0 1px #FFFFFFB3,0 1px 1px #20202026;
    --ww-shadow-selected: inset 0 0 0 1px #FFFFFF99,0 1px 1px #2020200A;
    --ww-press-distance: 1px;
    --ww-duration-press: 80ms;
    --ww-backdrop: #20202044;
    --ww-focus: var(--ww-text);
    --ww-disabled-bg: var(--ww-border);
    --ww-disabled-text: var(--ww-text-secondary);
  }
}
@media (prefers-reduced-motion: reduce) {
  @layer base {
    :root { --ww-duration-feedback: 0ms; --ww-duration-panel: 0ms; --ww-duration-press: 0ms; --ww-press-distance: 0px; }
  }
}