/*
 * Payas Reckoner Calculator — Payas Design System Tokens
 * Part of Payas Webkit · Developer: Saman Udayanga Wijesinghe
 * Copyright (C) 2025 Saman Udayanga Wijesinghe — GPLv2
 */

/* ═══════════════════════════════════════════
   PAYAS DESIGN TOKENS — Light (default)
═══════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg-app:        #eeeae2;
  --bg-bar:        #ffffff;
  --bg-sidebar:    #f5f2eb;
  --bg-chip:       #f0ece3;
  --bg-hover:      #e8e4db;
  --bg-active:     #dedad1;
  --bg-modal:      #ffffff;
  --text-1:        #181816;
  --text-2:        #52504a;
  --text-3:        #90907e;
  --border:        #dbd7ce;
  --accent:        #2d6a4f;
  --accent-lt:     #52b788;
  --accent-dk:     #1b4332;
  --accent-dim:    rgba(45,106,79,.12);
  --shadow:        0 1px 5px rgba(0,0,0,.07);
  --shadow-lg:     0 16px 56px rgba(0,0,0,.14);
  --scrollbar:     #ccc8bc;
  --overlay:       rgba(20,20,18,.52);
  --danger:        #dc2626;
  --danger-dim:    rgba(220,38,38,.10);
  --warn:          #d97706;

  /* Calculator-specific derived tokens */
  --disp-bg:       #f0ece3;
  --disp-text:     #181816;
  --disp-expr:     #90907e;
  --btn-num-bg:    #ffffff;
  --btn-num-border:#dbd7ce;
  --btn-op-bg:     rgba(45,106,79,.12);
  --btn-op-text:   #2d6a4f;
  --btn-eq-bg:     #2d6a4f;
  --btn-eq-text:   #ffffff;
  --btn-clr-bg:    rgba(220,38,38,.10);
  --btn-clr-text:  #dc2626;
  --btn-fn-bg:     #f0ece3;
  --btn-fn-text:   #52504a;
  --rpn-bg:        #f0ece3;
  --rpn-text:      #2d6a4f;
}

/* ═══════════════════════════════════════════
   PAYAS DESIGN TOKENS — Dark
═══════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-app:        #0f0f0e;
  --bg-bar:        #191917;
  --bg-sidebar:    #141412;
  --bg-chip:       #1e1e1c;
  --bg-hover:      #242422;
  --bg-active:     #2e2e2c;
  --bg-modal:      #222220;
  --text-1:        #e8e4d6;
  --text-2:        #a4a099;
  --text-3:        #62605a;
  --border:        #2a2a28;
  --accent:        #52b788;
  --accent-lt:     #74c69d;
  --accent-dk:     #95d5b2;
  --accent-dim:    rgba(82,183,136,.12);
  --shadow:        0 1px 5px rgba(0,0,0,.4);
  --shadow-lg:     0 16px 56px rgba(0,0,0,.6);
  --scrollbar:     #333330;
  --overlay:       rgba(0,0,0,.72);
  --danger:        #ef4444;
  --danger-dim:    rgba(239,68,68,.12);
  --warn:          #f59e0b;

  --disp-bg:       #1e1e1c;
  --disp-text:     #e8e4d6;
  --disp-expr:     #62605a;
  --btn-num-bg:    #222220;
  --btn-num-border:#2a2a28;
  --btn-op-bg:     rgba(82,183,136,.12);
  --btn-op-text:   #52b788;
  --btn-eq-bg:     #2d5a3e;
  --btn-eq-text:   #74c69d;
  --btn-clr-bg:    rgba(239,68,68,.12);
  --btn-clr-text:  #ef4444;
  --btn-fn-bg:     #1e1e1c;
  --btn-fn-text:   #a4a099;
  --rpn-bg:        #1e1e1c;
  --rpn-text:      #52b788;
}

/* ═══════════════════════════════════════════
   GLOBAL RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg-app);
  color: var(--text-1);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .22s, color .22s;
  line-height: 1.5;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }

/* ═══════════════════════════════════════════
   FOCUS RING (WCAG AA)
═══════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}