/*
  Design system tokens, adapted from the Figma marketing design language
  for a dense internal admin/ticketing tool (no hero sections, no full-viewport
  color blocks — those are reserved for status/context surfaces instead).
  Font substitutes per spec: figmaSans -> Inter, figmaMono -> JetBrains Mono.
*/

:root{
  /* Colors */
  --ds-primary:#000000;
  --ds-on-primary:#ffffff;
  --ds-ink:#000000;
  --ds-canvas:#ffffff;
  --ds-inverse-canvas:#000000;
  --ds-inverse-ink:#ffffff;
  --ds-on-inverse-soft:rgba(255,255,255,.16);
  --ds-hairline:#e6e6e6;
  --ds-hairline-soft:#f1f1f1;
  --ds-surface-soft:#f7f7f5;

  --ds-block-lime:#dceeb1;
  --ds-block-lilac:#c5b0f4;
  --ds-block-cream:#f4ecd6;
  --ds-block-pink:#efd4d4;
  --ds-block-mint:#c8e6cd;
  --ds-block-coral:#f3c9b6;
  --ds-block-navy:#1f1d3d;

  --ds-accent-magenta:#ff3d8b;
  --ds-success:#1ea64a;
  --ds-danger:#dc2626;
  --ds-danger-soft:#fef2f2;
  --ds-success-soft:#f0fdf4;
  --ds-scrim:rgba(0,0,0,.6);

  /* Radii */
  --ds-r-xs:2px;
  --ds-r-sm:6px;
  --ds-r-md:8px;
  --ds-r-lg:24px;
  --ds-r-xl:32px;
  --ds-r-pill:50px;
  --ds-r-full:9999px;

  /* Spacing */
  --ds-sp-hair:1px;
  --ds-sp-xxs:4px;
  --ds-sp-xs:8px;
  --ds-sp-sm:12px;
  --ds-sp-md:16px;
  --ds-sp-lg:24px;
  --ds-sp-xl:32px;
  --ds-sp-xxl:48px;
  --ds-sp-section:96px;
}

.ds-font-sans{font-family:'Inter',system-ui,sans-serif}
.ds-font-mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* Typography */
.ds-headline{font-family:'Inter',sans-serif;font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.5px;color:var(--ds-ink)}
.ds-subhead{font-family:'Inter',sans-serif;font-size:20px;font-weight:400;line-height:1.4;letter-spacing:-.2px;color:var(--ds-ink)}
.ds-body{font-family:'Inter',sans-serif;font-size:15px;font-weight:400;line-height:1.45;color:var(--ds-ink)}
.ds-body-sm{font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:1.45;color:var(--ds-ink)}
.ds-body-soft{font-weight:400;color:var(--ds-ink);opacity:.55}
.ds-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-ink)}
.ds-caption{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--ds-ink);opacity:.55}
.ds-link{font-weight:600;color:var(--ds-ink);text-decoration:none}
.ds-link:hover{text-decoration:underline}

/* Buttons */
.ds-btn{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;border:none;cursor:pointer;transition:transform .12s ease,opacity .12s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ds-btn:active{transform:scale(.98)}
.ds-btn:disabled{opacity:.5;cursor:default;transform:none}

.ds-btn-primary{background:var(--ds-primary);color:var(--ds-on-primary);border-radius:var(--ds-r-pill);padding:14px 20px}
.ds-btn-secondary{background:var(--ds-canvas);color:var(--ds-ink);border:1.5px solid var(--ds-hairline);border-radius:var(--ds-r-pill);padding:12.5px 20px}
.ds-btn-tertiary{background:transparent;color:var(--ds-ink);border-radius:var(--ds-r-full);padding:8px 12px;font-weight:600}
.ds-btn-magenta{background:var(--ds-accent-magenta);color:var(--ds-on-primary);border-radius:var(--ds-r-pill);padding:10px 18px}

.ds-icon-circle{width:56px;height:56px;border-radius:var(--ds-r-full);display:inline-flex;align-items:center;justify-content:center;background:var(--ds-primary);color:var(--ds-on-primary)}
.ds-icon-circle-soft{background:var(--ds-surface-soft);color:var(--ds-ink)}

/* Inputs */
.ds-input{width:100%;padding:12px 14px;border:1.5px solid var(--ds-hairline);border-radius:var(--ds-r-md);font-size:15px;font-family:'Inter',sans-serif;background:var(--ds-canvas);color:var(--ds-ink);transition:border-color .15s,box-shadow .15s;outline:none}
.ds-input::placeholder{color:var(--ds-ink);opacity:.35}
.ds-input:focus{border-color:var(--ds-ink);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.ds-label{display:block;font-size:13px;font-weight:600;color:var(--ds-ink);margin-bottom:6px}

/* Surfaces */
.ds-card{background:var(--ds-canvas);border:1px solid var(--ds-hairline);border-radius:var(--ds-r-lg);padding:var(--ds-sp-xl)}
.ds-surface-soft{background:var(--ds-surface-soft);border-radius:var(--ds-r-md)}

/* Alerts (semantic — not part of the decorative block palette) */
.ds-alert{padding:12px 14px;border-radius:var(--ds-r-md);font-size:14px;border:1px solid transparent}
.ds-alert-danger{background:var(--ds-danger-soft);color:var(--ds-danger);border-color:#fecaca}
.ds-alert-success{background:var(--ds-success-soft);color:var(--ds-success);border-color:#bbf7d0}

/* Status / context block chips — draws on the block-* palette for
   semantic surfaces (ticket status, tags) instead of full-page sections */
.ds-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--ds-r-full);color:var(--ds-ink)}
.ds-chip-lime{background:var(--ds-block-lime)}
.ds-chip-lilac{background:var(--ds-block-lilac)}
.ds-chip-cream{background:var(--ds-block-cream)}
.ds-chip-pink{background:var(--ds-block-pink)}
.ds-chip-mint{background:var(--ds-block-mint)}
.ds-chip-coral{background:var(--ds-block-coral)}
.ds-chip-navy{background:var(--ds-block-navy);color:var(--ds-inverse-ink)}

@keyframes ds-fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.ds-fade-in{animation:ds-fade-in .3s ease-out}