/*
 * Costa MLS design tokens. The only place a raw colour, size, radius, shadow or duration
 * is written down. Every other stylesheet reads these custom properties.
 *
 * Values are taken from docs/design/screens/Brand.dc.html and the screen boards.
 * Documented in docs/design/TOKENS.md.
 */

:root {
  color-scheme: light;

  /* ---- Palette: the eight brand colours, named as on the brand board ------------- */
  --c-sea: #0f5563;        /* buttons, links, selected states */
  --c-deep: #0f2a2c;       /* commission box, exclusive pill, avatar */
  --c-gold: #c9963f;       /* logo mark and wordmark only */
  --c-gold-deep: #7a571a;  /* gold as readable text on light grounds */
  --c-sand: #f4f0e8;       /* page ground */
  --c-white: #ffffff;      /* cards and bars */
  --c-ink: #12201f;        /* titles */
  --c-text: #44504e;       /* body copy */

  /* ---- Roles: what the palette is used for -------------------------------------- */
  --bg: var(--c-sand);
  --surface: var(--c-white);
  --surface-soft: #f3f7f6;
  --text: var(--c-text);
  --text-strong: var(--c-ink);
  --text-muted: #5e6967;
  --text-placeholder: #6b7472;
  --link: var(--c-sea);
  --link-hover: #0a4350;

  --primary: var(--c-sea);
  --primary-hover: var(--link-hover);
  --primary-tint: #e3eff0;
  --on-primary: var(--c-white);

  --dark: var(--c-deep);
  --on-dark: #d9e2df;
  --on-dark-strong: var(--c-white);
  --accent-on-dark: #dca54a;
  --accent-on-dark-hover: #e9b765;
  --accent-text: var(--c-gold-deep);

  --line: #e3dccf;
  --line-soft: #ece6db;
  --line-strong: #c9c2b5;
  --placeholder-fill: #e9e3d7;
  --placeholder-text: #5c5a52;

  /* ---- Status colours: one pair (ground, text) per meaning ------------------------ */
  --st-available-bg: var(--primary-tint);
  --st-available-fg: var(--c-sea);
  --st-reserved-bg: #f6ecd9;
  --st-reserved-fg: #7a5718;
  --st-sold-bg: #ebe8e2;
  --st-sold-fg: var(--c-text);
  --st-exclusive-bg: var(--c-deep);
  --st-exclusive-fg: var(--accent-on-dark);
  --st-attention-bg: #f7e4df;
  --st-attention-fg: #8f2f1c;
  --st-new-bg: var(--c-white);
  --st-new-fg: var(--c-sea);

  --danger: #8f2f1c;
  --danger-strong: #b3361f;
  --danger-hover: #75261a;
  --danger-line: #e6bfb5;
  --danger-tint: var(--st-attention-bg);
  --warn-tint: var(--st-reserved-bg);
  --warn-fg: var(--st-reserved-fg);
  --warn-line: #e8d3ac;
  --success-fg: #1f6b45;
  --success-tint: #e2f0e8;

  /* ---- Typography ----------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (rem, root 16px). One step per job. */
  --fs-2xs: 0.6875rem;  /* 11px  logo tagline */
  --fs-xs: 0.78rem;     /* 12.5px pills, captions */
  --fs-sm: 0.875rem;    /* 14px  hints, footer, secondary text */
  --fs-md: 0.9375rem;   /* 15px  buttons, nav, tables */
  --fs-base: 1rem;      /* 16px  body, inputs */
  --fs-lg: 1.375rem;    /* 22px  section titles, prices on cards */
  --fs-xl: 1.625rem;    /* 26px  state titles */
  --fs-2xl: 2rem;       /* 32px  page titles */
  --fs-3xl: 1.875rem;   /* 30px  the commission figure: the largest number on a listing */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-caps: 0.09em;
  --tracking-tight: 0.02em;
  --tracking-tighter: -0.01em;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --measure: 65ch;      /* reading line length; stays under 80 characters */

  /* ---- Spacing scale (4px base) ---------------------------------------------------- */
  --sp-0: 0.125rem; /*  2  optical nudges only */
  --sp-1: 0.25rem;  /*  4 */
  --sp-2: 0.5rem;   /*  8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */

  /* ---- Sizes shared by controls ---------------------------------------------------- */
  --control-h: 2.75rem;       /* 44px: the touch target floor */
  --control-h-field: 2.875rem; /* 46px: text fields on forms */
  --pill-h: 1.625rem;         /* 26px */
  --avatar: 2.25rem;          /* 36px */
  --page-max: 85rem;          /* 1360px */
  --gutter: var(--sp-5);      /* header, page and footer share it; --sp-4 on a phone (below) */
  --card-min: 18rem;          /* narrowest listing card */
  --field-min: 16rem;         /* narrowest form field in a row: wide enough for a one-line label */
  --texts-min: 28rem;         /* narrowest language section of the translations page */
  --dialog-w: 30rem;
  --toast-w: 28rem;

  /* ---- Radii ----------------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Shadows --------------------------------------------------------------------- */
  --shadow-lift: 0 8px 24px rgba(18, 32, 31, 0.08);
  --shadow-float: 0 8px 24px rgba(18, 32, 31, 0.18);
  --shadow-dialog: 0 24px 64px rgba(18, 32, 31, 0.28);
  --scrim: rgba(15, 42, 44, 0.55);
  --on-dark-wash: rgba(255, 255, 255, 0.14);
  --skel-base: var(--line-soft);
  --skel-shine: #f8f5ef;
  --disabled-bg: var(--line-soft);
  --disabled-fg: var(--text-placeholder);

  /* ---- Focus ring ------------------------------------------------------------------ */
  --focus: var(--c-sea);
  --focus-on-dark: var(--accent-on-dark);
  --ring-w: 3px;
  --ring-offset: 2px;

  /* ---- Motion ---------------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Breakpoints ----------------------------------------------------------------- */
  /* Custom properties cannot be read inside @media, so app.css and components.css repeat
     these two literals. Change them here and there together; nowhere else. */
  --bp-phone: 760px;  /* nav collapses to the menu button */
  --bp-table: 640px;  /* tables become stacked cards */
  --bp-narrow: 480px; /* the header tagline loses its capitals */
}

/* The one place the gutter changes: 16px on a phone, so header, content and footer line up. */
@media (max-width: 760px) {
  :root {
    --gutter: var(--sp-4);
  }
}