/* =========================================================
 * eID Remote Signing — Design Tokens
 * Drop this file into your real codebase and reference via
 * CSS variables. All colors tuned for WCAG AA on surface.
 * ========================================================= */

:root {
  /* ---- Surfaces / Ink (light) ---- */
  --rs-bg:             #F7F7F5;   /* app canvas */
  --rs-surface:        #FFFFFF;   /* cards, panels */
  --rs-surface-2:      #FBFBF9;   /* recessed inputs, left pane */
  --rs-surface-3:      #F1F1EE;   /* chips, track fills */
  --rs-border:         #E6E5E0;
  --rs-border-strong:  #D4D3CC;

  --rs-text:           #14171F;
  --rs-text-muted:     #5C6170;
  --rs-text-dim:       #8B8F9B;

  /* ---- Accent: trust-blue ---- */
  --rs-accent:         #1E5EFF;
  --rs-accent-hover:   #1A52E0;
  --rs-accent-soft:    #E8EFFF;
  --rs-accent-ink:     #103A99;

  /* ---- Status ---- */
  --rs-success:        #1F8A5C;
  --rs-success-soft:   #E6F5EE;
  --rs-warn:           #B5700B;
  --rs-warn-soft:      #FBF2DF;
  --rs-danger:         #C7342A;
  --rs-danger-soft:    #FBE9E7;

  /* ---- Radii ---- */
  --rs-radius-sm:  6px;
  --rs-radius:    10px;
  --rs-radius-lg: 14px;

  /* ---- Elevation ---- */
  --rs-shadow-sm: 0 1px 2px rgba(20, 23, 31, 0.04);
  --rs-shadow:    0 4px 16px -4px rgba(20, 23, 31, 0.08),
                  0 1px 2px rgba(20, 23, 31, 0.04);
  --rs-shadow-lg: 0 20px 48px -12px rgba(20, 23, 31, 0.18),
                  0 4px 12px rgba(20, 23, 31, 0.06);

  /* ---- Type ---- */
  --rs-font-sans:  "Inter", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", sans-serif;
  --rs-font-mono:  "JetBrains Mono", "IBM Plex Mono",
                   ui-monospace, Menlo, monospace;

  /* ---- Type ramp ---- */
  --rs-fs-xs:   11px;   /* meta, labels */
  --rs-fs-sm:   12.5px; /* secondary body */
  --rs-fs-md:   13.5px; /* primary body */
  --rs-fs-lg:   15px;   /* brand, card titles */
  --rs-fs-xl:   18px;   /* modal titles */
  --rs-fs-h1:   22px;   /* page title */

  /* ---- Spacing ---- */
  --rs-space-1:  4px;
  --rs-space-2:  8px;
  --rs-space-3:  12px;
  --rs-space-4:  16px;
  --rs-space-5:  20px;
  --rs-space-6:  24px;
  --rs-space-8:  32px;

  /* ---- Motion ---- */
  --rs-dur-fast:   120ms;
  --rs-dur-med:    250ms;
  --rs-ease-out:   cubic-bezier(.2, .9, .3, 1);
}

[data-theme="dark"] {
  --rs-bg:             #0B0D12;
  --rs-surface:        #14171F;
  --rs-surface-2:      #191D26;
  --rs-surface-3:      #222631;
  --rs-border:         #262B37;
  --rs-border-strong:  #343A48;

  --rs-text:           #F1F1EE;
  --rs-text-muted:     #A0A4B0;
  --rs-text-dim:       #6E7485;

  --rs-accent:         #6E9CFF;
  --rs-accent-hover:   #8FB3FF;
  --rs-accent-soft:    #142447;
  --rs-accent-ink:     #B9CDFF;

  --rs-success:        #4FCF93;
  --rs-success-soft:   #13291F;
  --rs-warn:           #E5B155;
  --rs-warn-soft:      #2C2313;
  --rs-danger:         #F07267;
  --rs-danger-soft:    #2D1816;
}