/* ============================================================
   tokens.css — Design tokens (CSS custom properties)
   SecurePass — no external dependencies
   ============================================================ */

/* ── Light mode (default) ─────────────────────────────────── */
:root {
  /* Background surfaces */
  --color-bg:               #faf9fe; /* surface / background */
  --color-bg-secondary:     #f4f3f8; /* surface-container-low */
  --color-bg-elevated:      #ffffff; /* surface-container-lowest */
  --color-bg-sunken:        #eeedf3; /* surface-container */
  --color-bg-high:          #e9e7ed; /* surface-container-high */
  --color-bg-highest:       #e3e2e7; /* surface-container-highest */

  /* Text */
  --color-text:             #1a1b1f; /* on-surface / on-background */
  --color-text-secondary:   #717785; /* outline */
  --color-text-muted:       #414753; /* on-surface-variant */
  --color-text-inverted:    #faf9fe; /* inverse-on-surface */

  /* Primary brand */
  --color-primary:          #0071e3; /* primary-container (CTA blue) */
  --color-primary-hover:    #005cbb; /* surface-tint / slightly darker */
  --color-primary-text:     #ffffff; /* on-primary-container */
  --color-primary-subtle:   rgba(0, 113, 227, 0.10); /* tinted bg for icons */

  /* Secondary */
  --color-secondary:        #465e8b;
  --color-secondary-text:   #ffffff;

  /* Borders & outlines */
  --color-border:           #c1c6d6; /* outline-variant */
  --color-border-subtle:    rgba(193, 198, 214, 0.15); /* outline-variant/15 */
  --color-border-medium:    rgba(193, 198, 214, 0.30); /* outline-variant/30 */
  --color-outline:          #717785; /* outline (for dividers) */

  /* State / feedback */
  --color-error:            #ba1a1a;
  --color-error-bg:         #ffdad6;

  /* Strength bar — 5 levels (vivid; used for large-area bar FILL) */
  --color-strength-1:       #ff3b30; /* very-weak  */
  --color-strength-2:       #ff9500; /* weak       */
  --color-strength-3:       #ffcc00; /* fair       */
  --color-strength-4:       #34c759; /* strong     */
  --color-strength-5:       #00c853; /* very-strong*/

  /* Strength TEXT — WCAG AA (>=4.5:1) variants for label/checklist text.
     Light theme: darkened to clear 4.5:1 on #faf9fe / #ffffff backgrounds. */
  --color-strength-1-text:  #c41a12; /* very-weak   — 5.72:1 on #faf9fe */
  --color-strength-2-text:  #a8500a; /* weak        — 5.25:1 on #faf9fe */
  --color-strength-3-text:  #806400; /* fair        — 5.36:1 on #faf9fe */
  --color-strength-4-text:  #147a30; /* strong      — 5.20:1 on #faf9fe */
  --color-strength-5-text:  #0f7a45; /* very-strong — 5.15:1 on #faf9fe */

  /* ── Spacing ──────────────────────────────────────────── */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-2xl:  48px;

  /* ── Typography ───────────────────────────────────────── */
  --font-base:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "SF Mono", "Fira Code", "Fira Mono", ui-monospace,
                "Cascadia Code", Consolas, monospace;

  /* Font sizes */
  --text-xs:    0.6875rem; /* 11px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */

  /* ── Border radius ────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;   /* inputs */
  --radius-md:  10px;  /* buttons */
  --radius-lg:  16px;  /* cards */
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-nav: 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ── Transitions ──────────────────────────────────────── */
  --duration-fast:    150ms;
  --duration-default: 200ms;
  --duration-slow:    300ms;
  --ease-default:     ease-out;
  --transition:       var(--duration-default) var(--ease-default);

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:      896px;  /* max-w-4xl */
  --max-width-wide: 1280px; /* max-w-7xl */
  --nav-height:     64px;
}

/* ── Dark mode ────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:               #1a1b1f;
  --color-bg-secondary:     #25262b;
  --color-bg-elevated:      #2f3034;
  --color-bg-sunken:        #1f2024;
  --color-bg-high:          #35363b;
  --color-bg-highest:       #3d3e44;

  --color-text:             #e8e8ed;
  --color-text-secondary:   #a1a1a6;
  --color-text-muted:       #8e8e93;
  --color-text-inverted:    #1a1b1f;

  --color-primary:          #4da3ff;
  --color-primary-hover:    #6db5ff;
  --color-primary-text:     #001b3f;
  --color-primary-subtle:   rgba(77, 163, 255, 0.15);

  --color-secondary:        #aec7f9;
  --color-secondary-text:   #001b3f;

  --color-border:           #48484a;
  --color-border-subtle:    rgba(72, 72, 74, 0.40);
  --color-border-medium:    rgba(72, 72, 74, 0.60);
  --color-outline:          #8e8e93;

  --color-error:            #ff6b6b;
  --color-error-bg:         #3d1a1a;

  /* Strength TEXT — lightened to clear 4.5:1 on dark bg #1a1b1f */
  --color-strength-1-text:  #ff6b61; /* very-weak   — 6.17:1 on #1a1b1f */
  --color-strength-2-text:  #ffa94d; /* weak        — 9.04:1 on #1a1b1f */
  --color-strength-3-text:  #f5d020; /* fair        — 11.41:1 on #1a1b1f */
  --color-strength-4-text:  #5fd97f; /* strong      — 9.60:1 on #1a1b1f */
  --color-strength-5-text:  #2fdd8a; /* very-strong — 9.69:1 on #1a1b1f */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.60);
  --shadow-nav: 0 4px 12px rgba(0, 0, 0, 0.40);
}

/* ── Reduced motion override ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-default: 0ms;
    --duration-slow:    0ms;
  }
}