/*
 * ui-tokens.css
 * Design tokens global untuk theme UI lintas modul.
 */

:root {
  --ui-font-sans: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ui-white: #ffffff;
  --ui-black: #101213;

  --ui-steel-950: #1f2326;
  --ui-steel-900: #2a3137;
  --ui-steel-800: #3c5366;
  --ui-steel-700: #516273;
  --ui-steel-600: #607082;
  --ui-steel-500: #8793a0;
  --ui-steel-300: #bcc5cc;
  --ui-steel-200: #d8dde1;
  --ui-steel-100: #edf1f3;

  --ui-paper: #f7f9fa;
  --ui-mist: #d8dde1;
  --ui-cloud: #eef2f4;

  --ui-psych-teal-800: #0b5f59;
  --ui-psych-teal-700: #0f766e;
  --ui-psych-teal-600: #17867d;
  --ui-psych-teal-200: #a7dbd5;
  --ui-psych-teal-100: #d9f0ed;

  --ui-amber-800: #8d6624;
  --ui-amber-700: #a8792a;
  --ui-amber-200: #e7cfa4;
  --ui-amber-100: #f5ead6;

  --ui-danger-800: #923a2f;
  --ui-danger-700: #b4493a;
  --ui-danger-200: #e8b1a8;
  --ui-danger-100: #f8dfda;

  --ui-info-800: #245d73;
  --ui-info-700: #2b6f8a;
  --ui-info-200: #acd2df;
  --ui-info-100: #dbeef4;

  --ui-success-800: #245f43;
  --ui-success-700: #2d7a55;
  --ui-success-200: #afd5be;
  --ui-success-100: #ddefe5;

  --ui-surface-base: var(--ui-paper);
  --ui-surface-raised: var(--ui-white);
  --ui-surface-soft: var(--ui-cloud);
  --ui-surface-contrast: var(--ui-steel-950);

  --ui-text-primary: var(--ui-steel-950);
  --ui-text-secondary: var(--ui-steel-800);
  --ui-text-muted: var(--ui-steel-600);
  --ui-text-on-dark: var(--ui-white);

  --ui-border-subtle: rgba(60, 83, 102, 0.16);
  --ui-border-strong: rgba(31, 35, 38, 0.22);
  --ui-border-soft: rgba(188, 197, 204, 0.72);

  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 0.75rem;
  --ui-radius-lg: 1rem;
  --ui-radius-xl: 1.25rem;
  --ui-radius-pill: 999px;

  --ui-shadow-xs: 0 1px 2px rgba(16, 18, 19, 0.05);
  --ui-shadow-sm: 0 4px 12px rgba(16, 18, 19, 0.06);
  --ui-shadow-md: 0 10px 28px rgba(16, 18, 19, 0.08);
  --ui-shadow-lg: 0 16px 40px rgba(16, 18, 19, 0.12);

  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-space-10: 2.5rem;

  --ui-hero-gradient: linear-gradient(135deg, #1f2326 0%, #3c5366 52%, #0f766e 100%);
  --ui-surface-gradient-soft: linear-gradient(135deg, #eef2f4 0%, #f7f9fa 100%);

  --ui-tone-neutral-bg: rgba(96, 112, 130, 0.12);
  --ui-tone-neutral-text: var(--ui-steel-800);
  --ui-tone-neutral-border: rgba(96, 112, 130, 0.24);

  --ui-tone-info-bg: rgba(43, 111, 138, 0.12);
  --ui-tone-info-text: var(--ui-info-800);
  --ui-tone-info-border: rgba(43, 111, 138, 0.24);

  --ui-tone-success-bg: rgba(45, 122, 85, 0.12);
  --ui-tone-success-text: var(--ui-success-800);
  --ui-tone-success-border: rgba(45, 122, 85, 0.24);

  --ui-tone-warning-bg: rgba(168, 121, 42, 0.14);
  --ui-tone-warning-text: var(--ui-amber-800);
  --ui-tone-warning-border: rgba(168, 121, 42, 0.24);

  --ui-tone-danger-bg: rgba(180, 73, 58, 0.12);
  --ui-tone-danger-text: var(--ui-danger-800);
  --ui-tone-danger-border: rgba(180, 73, 58, 0.24);

  --ui-focus-ring: 0 0 0 0.25rem rgba(15, 118, 110, 0.18);

  --bs-body-font-family: var(--ui-font-sans);
  --bs-body-bg: var(--ui-surface-base);
  --bs-body-color: var(--ui-text-primary);
  --bs-border-color: var(--ui-border-subtle);
  --bs-link-color: var(--ui-psych-teal-700);
  --bs-link-hover-color: var(--ui-psych-teal-800);
}