/*
  ============================================================
  PONTO LIVRE — DESIGN SYSTEM TOKENS
  ============================================================
  Design direction: "mesa de despacho" (dispatch desk). The product's
  real-world object is a paper leave-request ticket that gets torn off,
  filed, and stamped approved/rejected — so the visual language borrows
  from claim tickets, punch cards and shift boards instead of a generic
  SaaS dashboard look.

  COLOR (4-6 named hues)
    graphite   #10131a   base background, deep desk-slate
    surface    #1c212c   card / panel surface
    amber      #f4a833   ticket / caution / "em análise" — the signature hue
    green      #34c98f   approved / free date
    red        #ef4b4b   rejected
    ink        #f1f3f7   primary text on dark

  TYPE (2 roles + 1 utility)
    display -> Archivo (800/900)      headlines, wordmark, eyebrows
    body    -> Inter (400-700)        UI copy, labels, paragraphs
    mono    -> IBM Plex Mono          protocol codes, dates, matrícula —
                                       anything that reads like it was
                                       printed by a ticket machine

  LAYOUT SIGNATURE
    The request form is rendered as a literal perforated ticket stub
    (tear-line + punched notches) that "prints" a receipt with a
    barcode-style flourish on submit. The admin queue reuses the same
    ticket-row silhouette. This is the one bold element — everything
    else stays quiet and functional.
  ============================================================
*/

:root{
  /* ---- color: surfaces ---- */
  --color-bg:#10131a;
  --color-bg-soft:#14171f;
  --color-surface:#1c212c;
  --color-surface-raised:#232935;
  --color-border:#2c3342;

  /* ---- color: accents / semantics ---- */
  --color-amber:#f4a833;
  --color-amber-dim:#8a6423;
  --color-green:#34c98f;
  --color-green-dim:#1f6b4d;
  --color-red:#ef4b4b;
  --color-red-dim:#7a2a2a;

  /* ---- color: text ---- */
  --color-text:#f1f3f7;
  --color-text-muted:#9096a6;
  --color-text-faint:#5b6274;

  /* ---- type families ---- */
  --font-display:'Archivo', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- type scale ---- */
  --text-xs:11.5px;
  --text-sm:13px;
  --text-base:14.5px;
  --text-md:16px;
  --text-lg:19px;
  --text-xl:clamp(24px,4vw,32px);
  --text-display:26px;

  /* ---- spacing scale (4px base) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:48px;

  /* ---- radius scale ---- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  /* ---- elevation ---- */
  --shadow-card:0 20px 50px -20px rgba(0,0,0,0.6);
  --shadow-toast:0 12px 30px -8px rgba(0,0,0,0.5);
  --shadow-btn:0 10px 24px -8px rgba(244,168,51,0.45);
  --shadow-btn-hover:0 14px 28px -8px rgba(244,168,51,0.55);

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.15s;
  --dur-base:.2s;
  --dur-slow:.35s;

  /* ---- z-index scale ---- */
  --z-modal:50;
  --z-toast:100;
}