/*
  PocketVault design tokens for the Web — the only file in the Web where a colour is written.

  Values come from the Desktop design system, docs/redesign/ui-redesign-spec.md §5, under the same
  names (bg/app becomes --bg-app), so the two clients look like one product and the measured
  contrast ratios there hold here. The few tokens marked "web" have no counterpart in the spec:
  translucent washes the Web layout still uses, each derived from a spec colour rather than
  introducing a new one. A test fails if a colour literal appears in any other stylesheet.
*/
:root {
    color-scheme: dark;

    /* Surfaces */
    --bg-app: #0F1014;
    --bg-sidebar: #131419;
    --surface-1: #17181E;
    --surface-2: #1D1E25;
    --surface-3: #24252D;
    --border-subtle: #26272F;
    --border-strong: #3A3B46;

    /* Text */
    --text-primary: #EDEDF2;
    --text-secondary: #A3A4B0;     /* 7.7:1 */
    --text-tertiary: #878893;      /* 5.0:1 on surface-1 — placeholders, metadata */
    --text-disabled: #5E5F6A;

    /* Accent — Slate & Azul (2026-09-30): replaced the earlier violet brand accent. text/fill were two
       close violets before; the new accent is one colour for both, used sparingly (primary actions,
       active navigation, selection, links, focus rings, small highlights) against the same near-black
       neutral base. */
    --accent-text: #2F81F7;        /* accent icons and text */
    --accent-fill: #2F81F7;        /* primary button */
    --accent-hover: #4C93FF;
    --accent-pressed: #1F63D1;
    --accent-subtle: #14213D;      /* active navigation */
    --focus-ring: #79B8FF;         /* 2 px, keyboard only */
    --on-accent: #FFFFFF;

    /* Status */
    --success: #3DD68C;
    --warning: #FFC56C;
    --warning-subtle: #2B2314;
    --danger-text: #FF9AA9;
    --danger-fill: #B3263A;        /* destructive, white on it 6.4:1 */
    --info: #6BA8FF;

    /* Web: translucent washes derived from the spec colours above */
    --accent-border: rgb(47 129 247 / 0.35);    /* --accent-text at 35 % */
    --accent-glow: rgb(47 129 247 / 0.12);      /* --accent-fill at 12 %, decorative washes only */
    --focus-glow: rgb(121 184 255 / 0.14);      /* --focus-ring at 14 %, the soft halo around it */
    --danger-border: rgb(255 154 169 / 0.35);   /* --danger-text at 35 % */
    --danger-subtle: rgb(179 38 58 / 0.14);     /* --danger-fill at 14 % */
    --inner-highlight: rgb(255 255 255 / 0.08);
    --shadow-color: rgb(0 0 0 / 0.34);
    --scrim: rgb(0 0 0 / 0.5);
    /* A QR code has to be dark on light to scan, whatever the theme around it. */
    --qr-light: #FFFFFF;
    --qr-dark: #0F1014;

    /* Service avatars: one hue per name, chosen by a hash (Client/ui/avatar.js), so a service always looks the
       same. Each is at least 4.5:1 on --surface-1, which DesignTokenTests measures. The tile behind a hue is that
       same hue mixed into the surface, never a second colour. */
    --hue-1: #2F81F7;
    --hue-2: #3DD68C;
    --hue-3: #FF9AA9;
    --hue-4: #7CC4FF;
    --hue-5: #F5C26B;
    --hue-6: #4FD1C5;
    --hue-7: #FFA36B;
    --hue-8: #E58CFF;

    /* Typography — system fonts, nothing to embed, as on the Desktop */
    --font-ui: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, monospace;
    --type-display: 28px;  --leading-display: 36px;
    --type-title: 20px;    --leading-title: 28px;
    --type-subtitle: 16px; --leading-subtitle: 22px;
    --type-body: 14px;     --leading-body: 20px;
    --type-caption: 12px;  --leading-caption: 16px;

    /* Space, radius */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;
    --radius-chip: 4px;
    --radius-control: 6px;
    --radius-card: 8px;
    --radius-dialog: 12px;
    --radius-tile: 12px;

    /* The vault's frame: the icon rail, the detail drawer and the smallest tile */
    --rail-width: 64px;
    --drawer-width: 360px;
    --tile-min: 168px;

    /* Motion — the spec's rules; B3 drives GSAP from these same numbers */
    --motion-hover: 120ms;
    --motion-enter: 160ms;
    --motion-layer-in: 200ms;
    --motion-layer-out: 120ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-hover: 0ms;
        --motion-enter: 0ms;
        --motion-layer-in: 0ms;
        --motion-layer-out: 0ms;
    }
}

/* Administração: variante clara confinada ao dashboard, sem alterar o cofre. */
.admin-app[data-theme="light"] {
    color-scheme: light;
    --bg-app: #F4F7FB;
    --bg-sidebar: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #EDF2F8;
    --surface-3: #E2EAF4;
    --border-subtle: #D8E1ED;
    --border-strong: #A6B7CB;
    --text-primary: #14253D;
    --text-secondary: #465C77;
    --text-tertiary: #526985;
    --accent-text: #1F63D1;
    --accent-subtle: #E6EFFD;
    --focus-ring: #1F63D1;
    --success: #147846;
    --warning: #7B4D00;
    --danger-text: #A21630;
    --info: #1F63D1;
}