/* =========================================================================
   Admissions+ Design System — Colors & Type tokens
   Vendored from the Internal Agents design handoff (chats/chat1.md +
   project/ds/colors_and_type.css). Owns the brand palette, the Proxima
   Nova @font-face stack, the type ramp, the spacing grid, and elevation.
   Pair with internal_agents_kit.css for the `ia-*` component classes.

   Font url() paths are basenames; Propshaft's CssAssetUrls compiler
   resolves them against app/assets/fonts (registered in
   config/initializers/assets.rb).
   ========================================================================= */

@font-face {
  font-family: "Proxima Nova";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Light-e793654c.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Light_Italic-fc30958b.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Regular-84e40592.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Regular_Italic-3bbf9e7d.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Semibold-dfdc92f1.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Semibold_Italic-205fcb4a.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Bold-fd973554.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("/assets/Proxima_Nova_Bold_Italic-1b78e0e3.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonnts.com-ProximaNova-Black-36a4e056.ttf") format("truetype");
}

:root {
  /* ---------- Brand ---------- */
  --color-primary-100:  #EEF2FB;
  --color-primary-200:  #D6DEF0;
  --color-primary-300:  #A7B4DC;
  --color-primary-400:  #546CBD;
  --color-primary-500:  #263C91;   /* navy — main brand */
  --color-primary-600:  #1B2D7C;
  --color-primary-700:  #172458;
  --color-primary-800:  #131D48;
  --color-primary-900:  #0E1637;
  --color-primary-950:  #070E45;

  --color-secondary-100: #FDECE8;
  --color-secondary-300: #F6A695;
  --color-secondary-500: #EC634B;  /* coral — brand accent */
  --color-secondary-700: #B84327;

  /* ---------- Interactive ---------- */
  --color-blue-100:    #EAF1FE;
  --color-blue-300:    #71A1F9;
  --color-blue-500:    #3478F7;
  --color-blue-700:    #1D4ED8;

  /* ---------- Status ---------- */
  --color-green-500:   #22C55E;
  --color-orange-500:  #F97316;
  --color-red-500:     #EF4444;
  --color-magenta-500: #C41D7F;

  /* ---------- Neutrals ---------- */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-100:  #F3F4F7;
  --color-neutral-200:  #E4E7EC;
  --color-neutral-300:  #D8E2E7;
  --color-neutral-400:  #A6AEBE;
  --color-neutral-500:  #818FA7;
  --color-neutral-600:  #657490;
  --color-neutral-700:  #505B72;
  --color-neutral-800:  #3B4354;
  --color-neutral-900:  #262B36;
  --color-neutral-950:  #111318;

  --color-neutral-translucent-100: rgba(37,58,106,0.08);
  --color-neutral-translucent-200: rgba(37,58,106,0.12);
  --color-neutral-translucent-300: rgba(37,58,106,0.18);
  --color-neutral-translucent-400: rgba(37,58,106,0.24);
  --color-neutral-translucent-700: rgba(37,58,106,0.44);

  --color-background:   #EEF2F8;
  --color-table-header: #C9D6EC;

  --color-primary:   var(--color-primary-500);
  --color-success:   var(--color-green-500);
  --color-danger:    var(--color-red-500);
  --color-warning:   var(--color-orange-500);
  --color-info:      var(--color-blue-500);
  --color-light:     var(--color-neutral-100);
  --color-dark:      var(--color-neutral-900);

  --fg-1: var(--color-neutral-900);
  --fg-2: var(--color-neutral-800);
  --fg-3: var(--color-neutral-600);
  --fg-4: var(--color-neutral-500);
  --fg-inverse: var(--color-neutral-0);

  --surface-page:  var(--color-background);
  --surface-card:  var(--color-neutral-0);
  --surface-sunk:  var(--color-neutral-100);
  --border-subtle: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);

  --font-heading: "Proxima Nova", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    Arial, "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-display:    48px/1.0   var(--font-heading);
  --text-h1:         22px/1.1   var(--font-heading);
  --text-h2:         18px/1.2   var(--font-heading);
  --text-h3:         16px/1.25  var(--font-heading);
  --text-h4:         14px/1.15  var(--font-sans);
  --text-h5:         12px/1.17  var(--font-sans);

  --text-body-l:     18px/1.55 var(--font-sans);
  --text-body-m:     16px/1.5  var(--font-sans);
  --text-body-s:     14px/1.4  var(--font-sans);
  --text-body-xs:    12px/1.33 var(--font-sans);
  --text-interaction:14px/1.15 var(--font-sans);
  --text-indicator:  12px/1.16 var(--font-sans);

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --radius-sm:   2px;
  --radius:      4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  --shadow-xs:  0 1px 0 rgba(23,36,88,0.04);
  --shadow-sm:  0 1px 2px rgba(23,36,88,0.08), 0 1px 1px rgba(23,36,88,0.04);
  --shadow-md:  0 4px 12px rgba(23,36,88,0.10);
  --shadow-lg:  0 12px 32px rgba(23,36,88,0.18);
  --focus-ring: 0 0 0 4px rgba(38,60,145,0.25);
}