/* Aktosingo design tokens.
   Shape lock: cards, inputs, buttons = 10px. Chips and avatars = full pill. Nothing else.
   Color lock: one accent (violet) across every screen, client and admin alike.
   Theme lock: the whole page is light or dark. No section inverts mid-page. */

:root {
  color-scheme: light;

  --surface:        #fbfbfd;
  --surface-2:      #f3f3f7;
  --surface-3:      #eaeaf0;
  --surface-raised: #fefeff;
  --line:           #e3e3ea;
  --line-strong:    #cfcfda;

  --ink:      #17171c;
  --ink-2:    #5b5b6a;
  --ink-3:    #8a8a9a;

  --accent:        #6d28d9;
  --accent-hover:  #5b21b6;
  --accent-soft:   #ede9fe;
  --accent-line:   #c9b8f5;
  --on-accent:     #fdfcff;

  --ok:       #15803d;
  --ok-soft:  #dcfce7;
  --warn:     #b45309;
  --warn-soft:#fef3c7;
  --bad:      #b91c1c;
  --bad-soft: #fee2e2;

  --r:      10px;
  --r-sm:   8px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(23, 23, 28, .06), 0 1px 1px rgba(23, 23, 28, .04);
  --shadow-2: 0 8px 24px rgba(23, 23, 28, .10), 0 2px 6px rgba(23, 23, 28, .06);

  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --z-sticky: 20;
  --z-pop:    40;
  --z-modal:  60;
  --z-toast:  80;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  .18s;

  --shell: 1400px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface:        #121216;
  --surface-2:      #1a1a20;
  --surface-3:      #23232b;
  --surface-raised: #1c1c23;
  --line:           #2b2b34;
  --line-strong:    #3b3b47;

  --ink:      #ececf1;
  --ink-2:    #a4a4b4;
  --ink-3:    #7d7d8e;

  --accent:        #a78bfa;
  --accent-hover:  #bda5ff;
  --accent-soft:   #2c2247;
  --accent-line:   #4b3e75;
  --on-accent:     #17131f;

  --ok:       #4ade80;
  --ok-soft:  #14321f;
  --warn:     #fbbf24;
  --warn-soft:#3a2a0c;
  --bad:      #f87171;
  --bad-soft: #3a1717;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface:        #121216;
    --surface-2:      #1a1a20;
    --surface-3:      #23232b;
    --surface-raised: #1c1c23;
    --line:           #2b2b34;
    --line-strong:    #3b3b47;

    --ink:      #ececf1;
    --ink-2:    #a4a4b4;
    --ink-3:    #7d7d8e;

    --accent:        #a78bfa;
    --accent-hover:  #bda5ff;
    --accent-soft:   #2c2247;
    --accent-line:   #4b3e75;
    --on-accent:     #17131f;

    --ok:       #4ade80;
    --ok-soft:  #14321f;
    --warn:     #fbbf24;
    --warn-soft:#3a2a0c;
    --bad:      #f87171;
    --bad-soft: #3a1717;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .40);
  }
}