@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600&display=swap");

@layer tokens, base, components;

@layer tokens {
  :root {
    --forest-950: #052f5f;
    --forest-900: #073f78;
    --forest-800: #09518d;
    --forest-700: #0b679f;
    --forest-100: #d9eaf4;
    --forest-50: #edf6fa;
    --cream: #f4f7f8;
    --header-cream: #f5f5f5;
    --paper: #ffffff;
    --ink: #17344e;
    --muted: #687985;
    --line: #dce4e8;
    --header-divider: #dce4e8;
    --peach: #20bfb2;
    --coral: #d96061;
    --coral-soft: #f9e6e6;
    --blue: #18a9ae;
    --blue-soft: #e0f4f3;
    --gold-soft: #fff2d8;
    --shadow-sm: 0 1px 2px rgba(5, 47, 95, .05), 0 5px 18px rgba(5, 47, 95, .05);
    --shadow-lg: 0 24px 70px rgba(5, 47, 95, .2);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --app-header-height: 88px;
    font-family: "DM Sans", system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
    font-synthesis: none;
  }
}

@layer base {
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--cream); }
  button, input, textarea, select { font: inherit; }
  button { color: inherit; }
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  a:focus-visible {
    outline: 3px solid rgba(39, 100, 89, .3);
    outline-offset: 2px;
  }
  .skip-link { position: fixed; left: 12px; top: -50px; z-index: 100; padding: 10px 14px; border-radius: 8px; color: var(--forest-900); background: white; }
  .skip-link:focus { top: 12px; }
  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
}

@layer components {
  .icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--paper);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
  }
  .icon-button:hover { border-color: #b8c5bf; background: white; }

  .primary-button,
  .secondary-button,
  .danger-button {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: .18s ease;
  }
  .primary-button { color: white; background: var(--forest-900); box-shadow: 0 5px 14px rgba(22,60,53,.15); }
  .primary-button:hover { transform: translateY(-1px); background: var(--forest-800); }
  .primary-button.compact { display: inline-flex; align-items: center; gap: 6px; }
  .primary-button.compact span { font-size: 18px; font-weight: 400; }
  .secondary-button { border-color: var(--line); background: var(--paper); }
  .secondary-button:hover { border-color: #aebbb5; background: white; }
  .danger-button { color: #9a4435; background: var(--coral-soft); }
  .text-button { border: 0; padding: 3px; color: var(--forest-700); background: none; cursor: pointer; font-size: 11px; font-weight: 700; }

  .panel,
  .ui-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
  }
  .panel-header,
  .ui-panel__header {
    min-height: 64px;
    padding: 15px 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .panel-header h3,
  .ui-panel__header h2 { margin: 0 0 3px; color: var(--forest-950); font: 600 17px/1.2 "Fraunces", Georgia, serif; }
  .panel-header p,
  .ui-panel__header p { margin: 0; color: var(--muted); }
  .panel-header p { font-size: 10px; }
  .ui-panel__header p { font-size: 12px; }

  .tag,
  .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  .status-pill { min-height: 24px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.15; }
  .tag { min-height: 22px; padding: 3px 8px; border-radius: 20px; color: var(--forest-700); background: var(--forest-50); font-size: 9px; font-weight: 700; }
  .tag.coral { color: #984535; background: var(--coral-soft); }
  .tag.gold { color: #906124; background: var(--gold-soft); }
  .tag.gray { color: #67736f; background: #eff0ed; }
  .tag.status-review,
  .status-pill--review { color: #9a4f12; border: 1px solid #f2d09a; background: #fff0d8; }
  .tag.status-progress,
  .status-pill--info { color: #155f83; border: 1px solid #bcddeb; background: #e8f5fb; }
  .tag.status-pending,
  .status-pill--warning { color: #88631c; border: 1px solid #ead797; background: #fff7d9; }
  .tag.status-complete,
  .status-pill--success { color: #126a57; border: 1px solid #b9dfd2; background: #e4f6ef; }
  .tag.status-cancelled,
  .status-pill--danger { color: #8b4a4a; border: 1px solid #e8c5c5; background: #f8eaea; }
  .status-pill--neutral { color: #5e6b67; border-color: #d9dfdc; background: #eff2f0; }

  .modal-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(680px, calc(100vw - 32px));
    max-height: min(780px, calc(100vh - 52px));
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    transform: translate(-50%,-50%);
    animation: modal-in .22s ease;
    overflow: hidden;
  }
  .modal-card.wide { width: min(880px, calc(100vw - 32px)); }
}