/* tokens.css — Ponto Setelima v7.9.0-p3a.9 — Design System Tokens */
/* Single source of truth: imported by ALL interfaces */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* p3a.10h4 (2026-04): Enforce [hidden] over any later display rule.
   The HTML `hidden` attribute relies on a user-agent `[hidden]{display:none}`
   rule that has near-zero specificity. A later declaration like
   `.ep-pin-view{display:flex}` silently overrides it, leaving views
   stuck visible after JS sets `el.hidden = true`. This bug blocked
   login flows in employee.html (PIN view never hid after auth) and
   manager.html (login view never hid after sign-in). !important here
   is correct: the attribute's semantics ARE "should not render". */
[hidden]{display:none!important}

:root{
  /* === BRAND === */
  --primary:#273C7A;--primary-hover:#2F6FB5;--primary-d:#1f3168;
  --accent:#1E88C8;

  /* === COLORS === */
  --bg:#F8FAFC;--bg2:#FFFFFF;--bg3:#E2E8F0;--bg-soft:#F1F5F9;
  --text:#1F2937;--text2:#475569;--text3:#64748b;--text4:#94a3b8;
  --blue:#273C7A;--blue-hover:#2F6FB5;
  --green:#3FA35C;--green-d:#2D8A4A;--green-l:#D1FAE5;
  --red:#DC2626;--red-d:#B91C1C;--red-l:#FEE2E2;
  --amber:#D97706;--amber-d:#B45309;--amber-l:#FEF3C7;
  --purple:#6D28D9;--purple-l:#EDE9FE;
  --gold:#FFD700;--gold-d:#F59E0B;
  --border:#E2E8F0;--border-soft:#F1F5F9;

  /* Semantic alphas — for tinted backgrounds */
  --green-a:rgba(63,163,92,0.12);
  --red-a:rgba(220,38,38,0.12);
  --amber-a:rgba(217,119,6,0.12);
  --blue-a:rgba(39,60,122,0.08);
  --purple-a:rgba(109,40,217,0.12);
  --accent-a:rgba(30,136,200,0.12);
  --text-a:rgba(100,116,139,0.12);

  /* Gradients for atmospheric headers (p3a.9) */
  --grad-primary:linear-gradient(180deg,#273C7A 0%,#2F6FB5 100%);
  --grad-primary-fade:linear-gradient(180deg,#273C7A 0%,#2F6FB5 85%,#F8FAFC 100%);
  --grad-success:linear-gradient(180deg,#273C7A 0%,#3FA35C 90%,#F8FAFC 100%);
  --grad-danger:linear-gradient(180deg,#273C7A 0%,#DC2626 120%,#F8FAFC 100%);
  --grad-gold:linear-gradient(135deg,#FFD700 0%,#F59E0B 100%);

  /* === SPACING === */
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;

  /* === RADIUS === */
  --radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-pill:9999px;

  /* === TYPOGRAPHY === */
  --font-sans:'DM Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-xxs:0.625rem;       /* 10px — labels muito pequenos */
  --fs-xs:0.6875rem;       /* 11px — captions */
  --fs-sm:0.75rem;         /* 12px — small body */
  --fs-body:0.875rem;      /* 14px — default body */
  --fs-md:1rem;            /* 16px — emphasis */
  --fs-lg:1.125rem;        /* 18px — h3 */
  --fs-xl:1.25rem;         /* 20px — h2 */
  --fs-2xl:1.5rem;         /* 24px — h1 mobile */
  --fs-3xl:2rem;           /* 32px — hero numbers */
  --fs-4xl:3rem;           /* 48px — display */
  --fw-bold:700;--fw-semi:600;--fw-medium:500;--fw-normal:400;
  --ls-tight:-0.03em;--ls-snug:-0.01em;--ls-normal:0em;--ls-wide:0.05em;--ls-wider:0.1em;

  /* Legacy aliases for existing CSS references */
  --fs-h1:1.5rem;--fs-h2:1.125rem;--fs-caption:0.75rem;--fs-min:0.6875rem;

  /* === SHADOWS === */
  --shadow-xs:0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,0.06),0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:0 4px 16px rgba(15,23,42,0.04),0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:0 8px 24px rgba(15,23,42,0.08),0 4px 8px rgba(15,23,42,0.04);
  --shadow-xl:0 16px 48px rgba(15,23,42,0.12),0 8px 16px rgba(15,23,42,0.06);
  --shadow-primary:0 4px 12px rgba(39,60,122,0.3);
  --shadow-danger:0 4px 12px rgba(220,38,38,0.25);
  --shadow-success:0 4px 12px rgba(63,163,92,0.2);
  --shadow-gold:0 4px 12px rgba(245,158,11,0.25);
  --shadow-pop:0 -12px 40px rgba(15,23,42,0.2);

  /* === TRANSITIONS === */
  --ease-out:cubic-bezier(.4,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --tr-instant:80ms var(--ease-out);
  --tr-fast:150ms var(--ease-out);
  --tr-normal:250ms var(--ease-out);
  --tr-slow:400ms var(--ease-out);
  --tr-spring:500ms var(--ease-spring);

  /* === Z-INDEX === */
  --z-base:1;--z-sticky:100;--z-dropdown:500;--z-modal:2000;--z-toast:3000;--z-tooltip:4000;

  /* === LAYOUT === */
  --header-h:64px;
  --content-max:640px;
  --safe-top:env(safe-area-inset-top,0);
  --safe-bottom:env(safe-area-inset-bottom,0);
}

/* === DARK MODE === */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--bg-soft:#1e293b;
    --text:#f1f5f9;--text2:#cbd5e1;--text3:#94a3b8;--text4:#64748b;
    --border:#334155;--border-soft:#1e293b;
    --green-a:rgba(63,163,92,0.2);
    --red-a:rgba(220,38,38,0.2);
    --amber-a:rgba(217,119,6,0.2);
    --blue-a:rgba(39,60,122,0.25);
    --purple-a:rgba(109,40,217,0.2);
    --accent-a:rgba(30,136,200,0.2);
    --text-a:rgba(148,163,184,0.15);
    --shadow-xs:0 1px 2px rgba(0,0,0,.2);
    --shadow-sm:0 1px 3px rgba(0,0,0,.3);
    --shadow-md:0 4px 12px rgba(0,0,0,.3);
    --shadow-lg:0 8px 24px rgba(0,0,0,.4);
    --shadow-xl:0 16px 48px rgba(0,0,0,.5);
  }
}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* === BASE RESET === */
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:var(--ls-snug);
  line-height:1.5;
  overscroll-behavior-y:none;
}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:inherit}
button:disabled{cursor:not-allowed;opacity:.5}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}

/* Focus ring — consistent across all interactive elements */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}

/* Skip link */
.skip-link{position:absolute;top:-40px;left:var(--space-sm);background:var(--primary);color:#fff;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);z-index:var(--z-tooltip);transition:top var(--tr-fast)}
.skip-link:focus{top:var(--space-sm)}

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Scrollbar — subtle, on-brand */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* Remove default tap highlight on mobile */
*{-webkit-tap-highlight-color:transparent}

/* ============================================================
   BACKWARDS-COMPAT LAYER — still needed as of p3a.10
   ============================================================
   Updated in Drop 2 (p3a.10): manager migrated to the 3-file CSS
   structure (tokens + base + components). Employee had already migrated
   in Drop 1 (p3a.9). Kiosk and viewer don't depend on these classes.

   ONLY admin.html still loads just tokens.css and uses these legacy
   utility classes (.skeleton, .loading-ring, .modal-overlay, .ripple,
   etc.). This block stays until the admin refactor, which is out of
   scope for the current campaign. */

/* Skeleton (legacy — see also base.css) */
.skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}
.skeleton-text{height:14px;margin-bottom:var(--space-sm);width:80%;border-radius:4px}
.skeleton-text.short{width:40%}
.skeleton-text.long{width:95%}
.skeleton-card{height:80px;margin-bottom:var(--space-md);border-radius:var(--radius-md)}
.skeleton-avatar{width:40px;height:40px;border-radius:50%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Loading spinner */
.loading-ring{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin:var(--space-xl) auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Stagger (legacy — see also base.css) */
.stagger>*{opacity:0;animation:staggerIn .35s var(--ease-out) forwards}
.stagger>*:nth-child(1){animation-delay:0ms}
.stagger>*:nth-child(2){animation-delay:50ms}
.stagger>*:nth-child(3){animation-delay:100ms}
.stagger>*:nth-child(4){animation-delay:150ms}
.stagger>*:nth-child(5){animation-delay:200ms}
.stagger>*:nth-child(6){animation-delay:250ms}
@keyframes staggerIn{to{opacity:1}}

/* Ripple (legacy — used by admin) */
.ripple{position:relative;overflow:hidden}
.ripple::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%),rgba(39,60,122,.12) 0%,transparent 70%);opacity:0;transition:opacity .3s}
.ripple:active::after{opacity:1;transition:opacity 0s}

/* Modal overlay (legacy — admin uses this) */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s var(--ease-out)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Page transition (legacy) */
.page-enter{animation:pageIn .3s var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Tab content transition (legacy) */
.tab-content-enter{animation:tabSlide .25s var(--ease-out)}
@keyframes tabSlide{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

/* D2: Shadow consistency — apply by component type */
.card,.panel{box-shadow:var(--shadow-sm);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg2)}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);transition:all var(--tr-fast)}
.modal{box-shadow:var(--shadow-xl);border-radius:var(--radius-xl)}

/* D3: Semantic colors (legacy aliases) */
.status-ok{color:var(--green)}.status-err{color:var(--red)}.status-warn{color:var(--amber)}
.bg-ok{background:rgba(63,163,92,.08)}.bg-err{background:rgba(220,38,38,.08)}.bg-warn{background:rgba(217,119,6,.08)}

/* Shadow utility classes (legacy) */
.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}
.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}

/* Content spacing (legacy) */
.content-area{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg)}
.card-grid{display:grid;gap:var(--space-lg)}
.section-gap{margin-bottom:var(--space-xl)}

/* Contextual toasts (legacy — admin uses these) */
.toast-context{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);border-left:4px solid var(--red);background:var(--bg2);box-shadow:var(--shadow-lg)}
.toast-context.success{border-left-color:var(--green)}
.toast-context.warning{border-left-color:var(--amber)}
.toast-context .toast-icon{font-size:20px;flex-shrink:0}
.toast-context .toast-title{font-weight:var(--fw-semi);font-size:var(--fs-body)}
.toast-context .toast-msg{font-size:var(--fs-caption);color:var(--text2);margin-top:2px}
.toast-rich{display:flex;gap:var(--space-md);align-items:flex-start;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);background:var(--bg2);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.toast-rich .toast-icon{font-size:24px;flex-shrink:0}