/* ============================================================
   Design tokens — depart.us

   Official palette:
     Navy         #092B49   brand, headings, navigation
     Red          #E31837   the star, and alerts only
     Light        #F7F9FC   page ground
     Charcoal     #17212B   body copy
     Tagline grey #4D5B6A   muted text

   Navy and red are split by JOB, not by taste. Navy carries every
   action and all structure. Red is reserved for the star in the
   wordmark and for genuine alerts, because a red button reads as a
   warning rather than as "continue".
   ============================================================ */
:root {
  /* --- brand ------------------------------------------------ */
  --brand-primary:        #092b49;   /* navy — structure */
  --brand-primary-hover:  #0c3a62;
  --brand-primary-soft:   #e8eef5;
  --brand-primary-ink:    #092b49;
  --brand-accent:         #e31837;   /* red — the star */
  --brand-navy:           #092b49;

  /* actions — navy, never red */
  --brand-cta:            #092b49;
  --brand-cta-hover:      #0c3a62;
  /* red stays for alerts and the star */
  --brand-alert:          #e31837;
  --brand-alert-soft:     #fdecef;

  --brand-success:        #10b981;
  --brand-success-hover:  #0da271;

  /* --- surfaces --------------------------------------------- */
  --bg:            #f7f9fc;
  --surface:       #ffffff;
  --surface-sunk:  #f1f4f9;
  --surface-soft:  #e8edf4;

  /* --- ink -------------------------------------------------- */
  --ink:           #092b49;   /* headings and strong values */
  --ink-soft:      #17212b;   /* charcoal — body copy */
  --ink-muted:     #4d5b6a;   /* tagline grey */
  --ink-faint:     #8a99ab;

  /* --- lines ------------------------------------------------ */
  --line:          #e3e8ef;
  --line-soft:     #edf1f6;
  --line-strong:   #cbd5e1;

  /* --- status ----------------------------------------------- */
  --warn-bg:       #fef9e7;
  --warn-line:     #f7e6b8;
  --warn-ink:      #8a6100;
  --danger:        #dc2626;
  --danger-bg:     #fef2f2;
  --danger-line:   #fecaca;
  --ok:            #059669;
  --ok-bg:         #ecfdf5;
  --ok-line:       #a7f3d0;

  /* --- radii ------------------------------------------------ */
  --r-card:   24px;
  --r-panel:  20px;
  --r-ctl:    17px;
  --r-sm:     12px;
  --r-xs:     10px;
  --r-pill:   999px;

  /* --- shadows ---------------------------------------------- */
  --sh-card:    0 1px 2px rgba(9, 43, 73, .04), 0 8px 28px -18px rgba(9, 43, 73, .20);
  --sh-panel:   0 1px 2px rgba(9, 43, 73, .04);
  --sh-primary: 0 10px 22px -10px rgba(9, 43, 73, .45);
  --sh-cta:     0 10px 22px -10px rgba(9, 43, 73, .45);
  --sh-success: 0 10px 22px -10px rgba(16, 185, 129, .5);
  --sh-modal:   0 24px 60px -20px rgba(9, 43, 73, .35);
  --sh-ring:    0 0 0 3px rgba(9, 43, 73, .16);

  /* --- type ------------------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "system-ui", "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- layout ----------------------------------------------- */
  --card-w:    662px;
  --card-w-md: 780px;       /* photo studio */
  --card-w-lg: 1000px;      /* two-column review screen */
  --card-pad:  44px;
  --header-h:  64px;

  /* --- motion ----------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur:  .22s;
}

@media (max-width: 720px) {
  :root {
    --card-pad: 20px;
    --r-card:   20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}