/* Flow — Bildbyrån · design tokens
   Drop into the app's global CSS. Every value matches the HTML design references in /screens. */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --flow-brand: #c6007c;
  --flow-brand-hover: #a30066;
  --flow-brand-tint: #fdf0f7;      /* selected bg, active nav, soft badges */
  --flow-brand-tint-2: #f9d9ea;    /* focus ring, tint borders */
  --flow-brand-on-dark: #f9a8d4;   /* eyebrow text on ink panels */

  /* Neutrals (warm) */
  --flow-bg: #f5f4f1;              /* app background, segmented-control track, subtle fills */
  --flow-bg-hover: #faf9f7;        /* row hover, table header */
  --flow-surface: #ffffff;
  --flow-fill: #f0eeea;            /* chips, avatar bg, neutral pills */
  --flow-fill-hover: #ebe8e3;
  --flow-border: #e7e4df;          /* cards, dividers */
  --flow-border-soft: #efece8;     /* row separators inside cards */
  --flow-border-input: #d9d5cf;    /* inputs, secondary buttons */
  --flow-border-strong: #c9c4bd;   /* dashed add buttons, hover borders */
  --flow-ink: #17151a;             /* text, dark panels, dark buttons */
  --flow-ink-2: #3d3a42;           /* secondary strong text */
  --flow-ink-3: #5f5b66;           /* body-secondary */
  --flow-muted: #6b6772;           /* labels, meta */
  --flow-subtle: #8a8691;          /* placeholders, eyebrows */
  --flow-ink-panel-2: #2a272e;     /* inputs/hover on dark panels */
  --flow-ink-panel-border: #4a4650;

  /* Semantic */
  --flow-danger: #b91c1c;  --flow-danger-strong: #dc2626; --flow-danger-ink: #991b1b;
  --flow-danger-bg: #fef2f2; --flow-danger-border: #fecaca; --flow-danger-border-2: #fca5a5;
  --flow-warn-ink: #b45309; --flow-warn-bg: #fff7ed;
  --flow-note-bg: #fffbeb; --flow-note-border: #fde68a; --flow-note-ink: #92400e;
  --flow-success: #059669; --flow-success-bg: #d1fae5; --flow-success-ink: #065f46; --flow-success-on-dark: #6ee7b7;

  /* Type */
  --flow-font: 'Schibsted Grotesk', system-ui, sans-serif;
  --flow-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --flow-r-xs: 6px; --flow-r-sm: 8px; --flow-r-md: 10px; --flow-r-lg: 12px; --flow-r-xl: 14px; --flow-r-2xl: 16px; --flow-r-pill: 999px;

  /* Control heights */
  --flow-h-sm: 40px; --flow-h-md: 44px; --flow-h-lg: 48px; --flow-h-xl: 52px;

  /* Shadows */
  --flow-shadow-seg: 0 1px 3px rgba(23,21,26,0.12);
  --flow-shadow-card-hover: 0 4px 16px rgba(23,21,26,0.06);
  --flow-shadow-pop: 0 8px 24px rgba(23,21,26,0.08);
  --flow-shadow-bar: 0 12px 32px rgba(23,21,26,0.25);
  --flow-shadow-drawer: -12px 0 40px rgba(23,21,26,0.18);
  --flow-shadow-modal: 0 24px 60px rgba(23,21,26,0.3);
  --flow-focus-ring: 0 0 0 3px var(--flow-brand-tint-2);

  /* Overlays */
  --flow-scrim: rgba(23,21,26,0.45);
  --flow-scrim-modal: rgba(23,21,26,0.5);
  --flow-lightbox-bg: #0e0d10;
}

/* Status palette — [bg, ink, dot] */
:root {
  --st-submitted-bg:#fef3c7; --st-submitted-ink:#92400e; --st-submitted-dot:#d97706;
  --st-request_sent-bg:#ede9fe; --st-request_sent-ink:#5b21b6; --st-request_sent-dot:#7c3aed;
  --st-accepted-bg:#cffafe; --st-accepted-ink:#155e75; --st-accepted-dot:#0891b2;
  --st-date_confirmed-bg:#ccfbf1; --st-date_confirmed-ink:#115e59; --st-date_confirmed-dot:#0d9488;
  --st-declined-bg:#fee2e2; --st-declined-ink:#991b1b; --st-declined-dot:#dc2626;
  --st-images_received-bg:#dbeafe; --st-images_received-ink:#1e40af; --st-images_received-dot:#2563eb;
  --st-approved-bg:#d1fae5; --st-approved-ink:#065f46; --st-approved-dot:#059669;
  --st-delivered-bg:#d1fae5; --st-delivered-ink:#065f46; --st-delivered-dot:#059669;
  --st-invoiced-bg:#f0eeea; --st-invoiced-ink:#3d3a42; --st-invoiced-dot:#6b7280;
  --st-archived-bg:#f0eeea; --st-archived-ink:#5f5b66; --st-archived-dot:#9ca3af;
  --st-cancelled-bg:#fee2e2; --st-cancelled-ink:#991b1b; --st-cancelled-dot:#dc2626;
}

/* Base */
html, body { margin: 0; background: var(--flow-bg); color: var(--flow-ink); font-family: var(--flow-font); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--flow-brand); text-decoration: none; }
a:hover { color: var(--flow-brand-hover); }
input, select, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--flow-subtle); }
/* keep from original flow.css: prevents iOS zoom on focus */
input, select, textarea { font-size: 16px; }

@keyframes flow-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }