/* =========================================================================
   Aisling Design System — Colors & Type Foundation
   Extracted from aisling-platform/packages/web/app/globals.css +
   Aisling Brand Guidelines PDF.
   ========================================================================= */

/* ---------------- Fonts ---------------- */
@font-face {
  font-family: "Diodrum";
  src: url("fonts/Diodrum-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========================================================================
     COLOR TOKENS — BRAND SCALE (Blue → Navy)
     Blue is the defining brand color. Navy is the authoritative anchor.
     Sky is the airy highlight. Everything else is neutral.
     ======================================================================== */
  --aisling-brand-50:  #f2fcff;
  --aisling-brand-100: #d9f5ff;
  --aisling-brand-200: #b7efff;  /* Sky Blue (brand) */
  --aisling-brand-300: #8dddf4;
  --aisling-brand-400: #5aa8cc;
  --aisling-brand-500: #2d87be;
  --aisling-brand-600: #0066b2;  /* Royal Blue (brand primary) */
  --aisling-brand-700: #00579a;
  --aisling-brand-800: #003f79;
  --aisling-brand-900: #00275c;  /* Navy (brand) */

  /* Named brand colors — exactly matching the Brand Guidelines PDF */
  --aisling-sky:   #b7efff;
  --aisling-royal: #0066b2;
  --aisling-navy:  #00275c;

  /* ---- Neutrals (greyscale) ---- */
  --aisling-neutral-0:   rgb(255, 255, 255);
  --aisling-neutral-50:  rgb(250, 250, 250);
  --aisling-neutral-100: rgb(245, 245, 245);
  --aisling-neutral-200: rgb(229, 229, 229);
  --aisling-neutral-300: rgb(212, 212, 212);
  --aisling-neutral-400: rgb(163, 163, 163);
  --aisling-neutral-500: rgb(115, 115, 115);
  --aisling-neutral-600: rgb(82, 82, 82);
  --aisling-neutral-700: rgb(64, 64, 64);
  --aisling-neutral-800: rgb(38, 38, 38);
  --aisling-neutral-900: rgb(23, 23, 23);
  --aisling-neutral-950: rgb(10, 10, 10);

  /* ---- Semantic: Success (green) ---- */
  --aisling-success-50:  rgb(240, 253, 244);
  --aisling-success-100: rgb(220, 252, 231);
  --aisling-success-200: rgb(187, 247, 208);
  --aisling-success-500: rgb(34, 197, 94);
  --aisling-success-600: rgb(22, 163, 74);
  --aisling-success-700: rgb(21, 128, 61);
  --aisling-success-800: rgb(22, 101, 52);

  /* ---- Semantic: Warning (amber) ---- */
  --aisling-warning-50:  rgb(254, 252, 232);
  --aisling-warning-100: rgb(254, 249, 195);
  --aisling-warning-200: rgb(254, 240, 138);
  --aisling-warning-500: rgb(234, 179, 8);
  --aisling-warning-600: rgb(202, 138, 4);
  --aisling-warning-700: rgb(161, 98, 7);
  --aisling-warning-800: rgb(133, 77, 14);

  /* ---- Semantic: Error / Destructive (red) ---- */
  --aisling-error-50:  rgb(254, 242, 242);
  --aisling-error-100: rgb(254, 226, 226);
  --aisling-error-200: rgb(254, 202, 202);
  --aisling-error-500: rgb(239, 68, 68);
  --aisling-error-600: rgb(220, 38, 38);
  --aisling-error-700: rgb(185, 28, 28);
  --aisling-error-800: rgb(153, 27, 27);

  /* ========================================================================
     SEMANTIC TOKENS — App roles (light theme, from globals.css)
     Use these in components; they are the closest to what shadcn/Tailwind
     expects (`primary`, `background`, `foreground`, ...).
     ======================================================================== */
  --aisling-bg:               #f7fcff;  /* Default background (tinted sky) */
  --aisling-fg:               #00275c;  /* Default text = navy */
  --aisling-card:             #ffffff;
  --aisling-card-fg:          #00275c;
  --aisling-popover:          #ffffff;
  --aisling-popover-fg:       #00275c;

  --aisling-primary:          #0066b2;  /* Royal */
  --aisling-primary-fg:       #ffffff;
  --aisling-secondary:        #d9f5ff;  /* Pale sky */
  --aisling-secondary-fg:     #00275c;
  --aisling-muted:            #eaf7fc;
  --aisling-muted-fg:         #31527f;  /* subtext */
  --aisling-accent:           #b7efff;  /* Sky */
  --aisling-accent-fg:        #00275c;

  --aisling-border:           #c8deea;
  --aisling-input:            #c8deea;
  --aisling-ring:             #0066b2;

  --aisling-destructive:      oklch(0.55 0.22 25);
  --aisling-destructive-fg:   #ffffff;

  /* Sidebar — app uses a solid navy sidebar with white text */
  --aisling-sidebar:          #00275c;
  --aisling-sidebar-fg:       #ffffff;
  --aisling-sidebar-primary:  #0066b2;
  --aisling-sidebar-accent:   #0066b2;
  --aisling-sidebar-border:   #204271;
  --aisling-sidebar-ring:     #b7efff;

  /* Chart palette (navy + blues, no rainbows) */
  --aisling-chart-1: #0066b2;
  --aisling-chart-2: #00275c;
  --aisling-chart-3: #5aa8cc;
  --aisling-chart-4: #7dcfe8;
  --aisling-chart-5: #8a6d3b;

  /* ========================================================================
     TYPOGRAPHY
     Per brand: Diodrum Semibold for H1/H2. Roboto (regular/medium) for
     H3–H6 and body.
     ======================================================================== */
  --font-heading-1: "Diodrum", "Arial", sans-serif;   /* H1 */
  --font-heading-2: "Diodrum", "Arial", sans-serif;   /* H2 */
  --font-heading-3: "Roboto", Georgia, serif;         /* H3–H6 */
  --font-body:      "Roboto", Georgia, serif;
  --font-caption:   "Roboto", Georgia, serif;
  --font-mono:      "Roboto Mono", "SFMono-Regular", monospace;

  /* ========================================================================
     RADIUS, SHADOWS, SPACING
     ======================================================================== */
  --aisling-radius-sm: 4px;
  --aisling-radius-md: 8px;   /* default ui radius */
  --aisling-radius-lg: 12px;
  --aisling-radius-xl: 16px;
  --aisling-radius-3xl: 24px; /* cards */
  --aisling-radius-4xl: 28px; /* cards/buttons pill */
  --aisling-radius-full: 9999px;

  --aisling-shadow-sm:  0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --aisling-shadow-md:  0px 4px 16px -2px rgba(0, 0, 0, 0.08),
                        0px 2px 4px -1px rgba(0, 0, 0, 0.08);
  --aisling-shadow-lg:  0px 12px 32px -4px rgba(0, 0, 0, 0.08),
                        0px 4px 8px -2px rgba(0, 0, 0, 0.08);
  --aisling-shadow-overlay: 0px 12px 32px -4px rgba(0, 0, 0, 0.08),
                            0px 4px 8px -2px rgba(0, 0, 0, 0.08);
  --aisling-ring-soft: 0 0 0 1px rgba(0, 39, 92, 0.05);
}

/* =========================================================================
   Semantic element styles — these are the headline sizes called out in
   the brand guidelines, paired with the Aisling app's working sizes.
   ========================================================================= */

html, body {
  background: var(--aisling-bg);
  color: var(--aisling-fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Marketing / brand scale (from Brand Guidelines) */
.text-heading-1 {
  font-family: var(--font-heading-1);
  font-weight: 600;
  font-size: 72px;
  line-height: 86px;   /* 72/86 in guidelines — trimmed from 80/96 to fit web */
  letter-spacing: 0;
}
.text-heading-2 {
  font-family: var(--font-heading-2);
  font-weight: 600;
  font-size: 56px;
  line-height: 68px;   /* 56/68 — app working size */
  letter-spacing: 0;
}
.text-heading-3 {
  font-family: var(--font-heading-3);
  font-weight: 500;
  font-size: 42px;
  line-height: 52px;
}

/* Page/section (app scale) */
.text-page-title {
  font-family: var(--font-heading-2);
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
}
.text-page-title-compact {
  font-family: var(--font-heading-2);
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.01em;
}
.text-section-title {
  font-family: var(--font-heading-3);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.01em;
}

/* Body / caption (app scale) */
.text-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
.text-body-bold {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.text-caption {
  font-family: var(--font-caption);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.text-caption-bold {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}
.text-monospace-body {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

/* Raw element defaults, matching the app */
h1 { font-family: var(--font-heading-1); color: var(--aisling-fg); font-weight: 600; }
h2 { font-family: var(--font-heading-2); color: var(--aisling-fg); font-weight: 600; }
h3, h4, h5, h6 { font-family: var(--font-heading-3); color: var(--aisling-fg); font-weight: 500; }