/* ============================================================
   2nd Swing — Design Tokens (combined for the intake app)
   Brand fonts: Rift (display, via Adobe Typekit) + URW DIN (body).
   ============================================================ */
@import url("https://use.typekit.net/syd8cho.css");
@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap");

:root {
  /* --- Brand Red scale --- */
  --color-brand-50:  #FDE2E2;
  --color-brand-100: #FCBBBB;
  --color-brand-200: #F88282;
  --color-brand-300: #EF4343;
  --color-brand-400: #D92121;
  --color-brand-450: #C62828;
  --color-brand-500: #B71C1C; /* PRIMARY */
  --color-brand-700: #6D1717;

  /* --- Secondary slate --- */
  --color-sec-300: #AEC8D6;
  --color-sec-400: #94ACB8;
  --color-sec-500: #69828E;
  --color-sec-700: #46565D;
  --color-sec-800: #3A454B;

  /* --- Warm tertiary + deep dark --- */
  --color-sand: #F5F0E4;
  --color-ink:  #101D1D;

  /* --- Greys --- */
  --color-grey-50:  #F8F8F8;
  --color-grey-100: #E6E6E6;
  --color-grey-200: #CCCCCC;
  --color-grey-300: #B2B2B2;
  --color-grey-400: #999999;
  --color-grey-500: #808080;
  --color-grey-600: #666666;
  --color-grey-700: #4D4D4D;
  --color-grey-800: #333333;
  --color-grey-900: #1D1D1D;

  /* Text */
  --text-strong: var(--color-grey-900);
  --text-body:   var(--color-grey-800);
  --text-muted:  var(--color-grey-600);
  --text-subtle: var(--color-grey-400);

  /* Borders */
  --border-subtle:  var(--color-grey-100);
  --border-default: var(--color-grey-200);
  --border-strong:  var(--color-grey-400);

  /* Status */
  --color-success-50:  #ECF8EF;
  --color-success-300: #81CF92;
  --color-success-600: #3DA755;
  --color-success-800: #256533;

  /* Fonts */
  --font-display: "rift", "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "urw-din", "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --btn-radius: 4px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(29, 29, 29, 0.06);
  --shadow-sm: 0 1px 3px rgba(29, 29, 29, 0.10), 0 1px 2px rgba(29, 29, 29, 0.06);
  --shadow-md: 0 4px 12px rgba(29, 29, 29, 0.10);
  --shadow-focus: 0 0 0 3px rgba(183, 28, 28, 0.30);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
}