/* ==========================================================================
   MIDDLEMAN — COLORS & TYPE
   Lifted from frontend/tailwind.config.js + stories/colors.mdx
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Inter-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Inter-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Inter-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Inter-Black.ttf') format('truetype');
}

/* ---------- Montserrat (brand display / headings) — self-hosted ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Montserrat-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Montserrat-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Montserrat-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Montserrat-Black.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); }

:root {
  /* ====================================================================
     COLOR SYSTEM
     ==================================================================== */

  /* Brand constants (short-hand aliases from tailwind.config.js) */
  --maingreen: #35ceba;      /* tertiary accent — teal */
  --mainblue:  #426dea;      /* primary brand blue — the outlined dot */
  --mainred:   red;
  --maingray:  #f4f8fa;      /* page/footer bg on desktop */
  --darkgray:  #57585a;
  --darkblue:  #1a2758;      /* "secondary-500" — deep navy sidebar */
  --deep-navy: #091645;      /* actual sidebar bg from Layout.jsx */
  --inputgray: #c4c4c4;
  --placeholdergray: #808080;
  --inputhoverblue:  #d3dcf5;
  --inputvalidblue:  #4c6ce2;  /* = --primary-500 */
  --blueclear: #c5d1f2;

  /* ---------- Primary (indigo / signature CTA blue) ---------- */
  --primary-25:  #eef2ff;
  --primary-50:  #e0e7ff;
  --primary-100: #c7d2fe;
  --primary-200: #a5b4fc;
  --primary-300: #818cf8;
  --primary-400: #6366f1;
  --primary-500: #4c6ce2;   /* canonical CTA — buttons, links, toggles */
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;   /* hover on primary buttons */
  --primary-900: #312e81;
  --primary-950: #1e1b4b;

  /* ---------- Secondary (navy — sidebar, titles) ---------- */
  --secondary-25:  #f0f3fa;
  --secondary-50:  #e2e7f5;
  --secondary-100: #c4cbe6;
  --secondary-200: #a3aacf;
  --secondary-300: #7d86b5;
  --secondary-400: #5a6297;
  --secondary-500: #1a2758;  /* "darkblue" */
  --secondary-600: #171f48;
  --secondary-700: #14193a;
  --secondary-800: #10132d;
  --secondary-900: #0c0e22;
  --secondary-950: #060711;

  /* ---------- Tertiary (teal — third accent, the other logo dot) ---------- */
  --tertiary-25:  #eefbf8;
  --tertiary-50:  #d3f5ef;
  --tertiary-100: #a6ebe0;
  --tertiary-200: #77e0d0;
  --tertiary-300: #51d6c3;
  --tertiary-400: #35ceba;   /* "mainteal" */
  --tertiary-500: #23b3a0;
  --tertiary-600: #1a8f81;
  --tertiary-700: #157267;
  --tertiary-800: #10574f;
  --tertiary-900: #0b3c37;
  --tertiary-950: #062622;

  /* ---------- Status ---------- */
  --error-25:  #fffbfa;  --error-50:  #fef3f2;  --error-100: #fee4e2;
  --error-200: #fecdca;  --error-300: #fda29b;  --error-400: #f97066;
  --error-500: #f04438;  --error-600: #d92d20;  --error-700: #b42318;
  --error-800: #912018;  --error-900: #7a271a;  --error-950: #55160c;

  --warning-25:  #fffcf5;  --warning-50:  #fffaeb;  --warning-100: #fef0c7;
  --warning-200: #fedf89;  --warning-300: #fec84b;  --warning-400: #fdb022;
  --warning-500: #f79009;  --warning-600: #dc6803;  --warning-700: #b54708;
  --warning-800: #93370d;  --warning-900: #7a2e0e;  --warning-950: #4e1d09;

  --success-25:  #f6fef9;  --success-50:  #ecfdf3;  --success-100: #dcfae6;
  --success-200: #a9efc5;  --success-300: #75e0a7;  --success-400: #47cd89;
  --success-500: #17b26a;  --success-600: #079455;  --success-700: #067647;
  --success-800: #085d3a;  --success-900: #074d31;  --success-950: #053321;

  /* ---------- Neutral ---------- */
  --black:    #000000;
  --white:    #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #182230;
  --gray-900: #101828;
  --gray-950: #0c111d;

  /* ====================================================================
     SEMANTIC TOKENS
     ==================================================================== */
  --bg-page:       var(--white);
  --bg-app:        var(--maingray);   /* #f4f8fa — the neutral page fill */
  --bg-surface:    var(--white);
  --bg-sidebar:    var(--deep-navy);  /* #091645 */
  --bg-subtle:     var(--gray-50);
  --bg-muted:      var(--gray-100);

  --fg-default:    var(--gray-900);
  --fg-muted:      var(--gray-600);
  --fg-subtle:     var(--gray-500);
  --fg-disabled:   var(--gray-400);
  --fg-inverse:    var(--white);
  --fg-brand:      var(--primary-500);
  --fg-navy:       var(--secondary-500);

  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--primary-500);
  --ring-focus:     var(--primary-100);

  --accent-mint:   var(--tertiary-400);
  --accent-navy:   var(--secondary-500);
  --accent-blue:   var(--primary-500);

  --selection-bg:  #a6ebe0;  /* teal selection */
  --selection-fg:  var(--white);

  /* ====================================================================
     TYPE SYSTEM
     ==================================================================== */
  /* Montserrat = brand display / headings (uploaded). Inter = UI & body. */
  --font-display: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Roboto', 'Helvetica Neue', sans-serif;
  --font-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;

  /* Tailwind default scale (what the codebase actually uses) */
  --text-xs:   0.75rem;   /* 12 */  --lh-xs:   1rem;
  --text-sm:   0.875rem;  /* 14 */  --lh-sm:   1.25rem;
  --text-base: 1rem;      /* 16 */  --lh-base: 1.5rem;
  --text-lg:   1.125rem;  /* 18 */  --lh-lg:   1.75rem;
  --text-xl:   1.25rem;   /* 20 */  --lh-xl:   1.75rem;
  --text-2xl:  1.5rem;    /* 24 */  --lh-2xl:  2rem;
  --text-3xl:  1.875rem;  /* 30 */  --lh-3xl:  2.25rem;
  --text-4xl:  2.25rem;   /* 36 */  --lh-4xl:  2.5rem;
  --text-5xl:  3rem;      /* 48 */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* ====================================================================
     SPACING / RADII / ELEVATION
     ==================================================================== */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm:  0.25rem;  /* 4  — small chips */
  --radius-md:  0.375rem; /* 6  — buttons (rounded-md) */
  --radius-lg:  0.5rem;   /* 8  — inputs (rounded-lg), cards */
  --radius-xl:  0.75rem;  /* 12 — invite pill (rounded-xl) */
  --radius-2xl: 1rem;
  --radius-full: 9999px;  /* pills, badges, avatars */

  /* From Tailwind default shadows — what `shadow-sm` and `shadow-lg` use */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-ring: 0 0 0 1px rgb(16 24 40 / 0.05);

  /* Brand-specific header drop */
  --shadow-header: 0 1px 2px 0 rgb(0 0 0 / 0.06);
}

/* ==========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Keep this cosmetic — apps that import this file get sensible defaults.
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Display / titles — largest on-screen headings. Montserrat ExtraBold, brand blue. */
.mm-display {
  font: var(--fw-extrabold) var(--text-4xl)/1.1 var(--font-display);
  color: var(--primary-500);
  letter-spacing: -0.02em;
}

/* Page titles — lighter "brand tint" over dark sections. Montserrat Light. */
.mm-page-title {
  font: var(--fw-light) var(--text-3xl)/1.2 var(--font-display);
  color: var(--blueclear);
  letter-spacing: -0.01em;
}

.mm-h1 { font: var(--fw-bold) var(--text-3xl)/1.2 var(--font-display); color: var(--secondary-500); letter-spacing: -0.015em; }
.mm-h2 { font: var(--fw-semibold) var(--text-2xl)/1.3 var(--font-display); color: var(--secondary-500); letter-spacing: -0.01em; }
.mm-h3 { font: var(--fw-semibold) var(--text-xl)/1.4  var(--font-display); color: var(--secondary-500); }
.mm-h4 { font: var(--fw-semibold) var(--text-lg)/1.4  var(--font-display); color: var(--secondary-500); }

/* Labels use darkblue + semibold — Label.jsx verbatim */
.mm-label {
  font: var(--fw-semibold) var(--text-sm)/1.25rem var(--font-sans);
  color: var(--darkblue);
}

.mm-body      { font: var(--fw-regular) var(--text-sm)/1.5  var(--font-sans); color: var(--gray-700); }
.mm-body-lg   { font: var(--fw-regular) var(--text-base)/1.6 var(--font-sans); color: var(--gray-700); }
.mm-caption   { font: var(--fw-regular) var(--text-xs)/1    var(--font-sans); color: var(--gray-500); }
.mm-link      { color: var(--primary-500); text-decoration: none; font-weight: var(--fw-semibold); }
.mm-link:hover { color: var(--primary-700); }
.mm-code      { font-family: var(--font-mono); font-size: var(--text-sm); }