/* ==========================================================================
   XO Medtech Global Design System — colors_and_type.css
   Source of truth: XOmedtech/campaigns-workspace, XOmedtech/mtv-workspace
   Both apps use Tailwind v4 + Shadcn (slate neutrals, oklch color spaces),
   Eudoxus Sans typeface (brand), --radius: 0.625rem.
   The one place they diverge is the PRIMARY HUE.
   ========================================================================== */

/* ---------- Eudoxus Sans (XO Medtech brand typeface, local files) --------- */
@font-face{font-family:"Eudoxus Sans";font-weight:200;font-style:normal;font-display:swap;
  src:url("/fonts/EudoxusSans-ExtraLight-BF659b6cb1e7092.ttf") format("truetype");}
@font-face{font-family:"Eudoxus Sans";font-weight:300;font-style:normal;font-display:swap;
  src:url("/fonts/EudoxusSans-Light-BF659b6cb2036b5.ttf") format("truetype");}
@font-face{font-family:"Eudoxus Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url("/fonts/EudoxusSans-Regular-BF659b6cb1d4714.ttf") format("truetype");}
@font-face{font-family:"Eudoxus Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url("/fonts/EudoxusSans-Medium-BF659b6cb1c14cb.ttf") format("truetype");}
@font-face{font-family:"Eudoxus Sans";font-weight:700;font-style:normal;font-display:swap;
  src:url("/fonts/EudoxusSans-Bold-BF659b6cb1408e5.ttf") format("truetype");}
@font-face{font-family:"Eudoxus Sans";font-weight:800;font-style:normal;font-display:swap;
  src:url("/fonts/EudoxusSans-ExtraBold-BF659b6cb1b96c9.ttf") format("truetype");}

:root {
  /* ---- Typography ----------------------------------------------------------- */
  --font-sans: "Eudoxus Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
               "Courier New", monospace;

  /* Semantic text scale (follows Shadcn/Tailwind defaults the repos actually use) */
  --text-display: 3.75rem;   /* 60px — marketing hero */
  --text-h1:      2.25rem;   /* 36px — page title */
  --text-h2:      1.5rem;    /* 24px — section heading */
  --text-h3:      1.125rem;  /* 18px — card heading */
  --text-h4:      1rem;      /* 16px */
  --text-body:    0.875rem;  /* 14px — default UI body in the apps */
  --text-base:    1rem;      /* 16px — public marketing body */
  --text-small:   0.8125rem; /* 13px */
  --text-xs:      0.75rem;   /* 12px — labels, metadata */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal:1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

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

  /* ---- Neutrals (slate — shared across both products) ---------------------- */
  --background:       oklch(1 0 0);
  --foreground:       oklch(0.141 0.005 285.823);       /* near-black slate */
  --card:             oklch(1 0 0);
  --card-foreground:  oklch(0.141 0.005 285.823);
  --popover:          oklch(1 0 0);
  --popover-foreground:oklch(0.141 0.005 285.823);
  --muted:            oklch(0.967 0.001 286.375);       /* gray-100 */
  --muted-foreground: oklch(0.552 0.016 285.938);       /* gray-500 */
  --accent:           oklch(0.967 0.001 286.375);
  --accent-foreground:oklch(0.21 0.006 285.885);
  --secondary:        oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --border:           oklch(0.92 0.004 286.32);         /* gray-200 */
  --input:            oklch(0.92 0.004 286.32);
  --ring:             oklch(0.6571 0.1279 228.83);      /* primary focus ring */
  --destructive:      oklch(0.577 0.245 27.325);

  /* ---- CAMPAIGNS / XO OS primary (cyan-blue) ------------------------------ */
  --xos-primary-50:  oklch(0.9791 0.0125 228.92);
  --xos-primary-100: oklch(0.9578 0.0237 223.67);
  --xos-primary-200: oklch(0.9124 0.053 220.6);
  --xos-primary-300: oklch(0.8521 0.0956 217.9);
  --xos-primary-400: oklch(0.7891 0.1278 219.39);
  --xos-primary-500: oklch(0.7219 0.1324 223.81);
  --xos-primary-600: oklch(0.6571 0.1279 228.83); /* brand default */
  --xos-primary-700: oklch(0.5302 0.1037 229.99);
  --xos-primary-800: oklch(0.4702 0.0878 227.26);
  --xos-primary-900: oklch(0.4115 0.0749 228.96);
  --xos-primary-950: oklch(0.3099 0.0553 230.86);

  /* ---- MTV primary (teal) ------------------------------------------------- */
  --mtv-primary-50:  oklch(0.967 0.045 176.6);
  --mtv-primary-100: oklch(0.89 0.073 176.6);
  --mtv-primary-200: oklch(0.808 0.099 176.6);
  --mtv-primary-300: oklch(0.726 0.124 176.6); /* brand default */
  --mtv-primary-400: oklch(0.646 0.148 176.6);
  --mtv-primary-500: oklch(0.565 0.172 176.6);
  --mtv-primary-600: oklch(0.497 0.154 176.6);
  --mtv-primary-700: oklch(0.384 0.12 176.6);
  --mtv-primary-800: oklch(0.271 0.086 176.6);
  --mtv-primary-900: oklch(0.181 0.062 176.6);

  /* ---- Default --primary (override per-product by switching class on <html>) */
  --primary:            var(--xos-primary-600);
  --primary-foreground: oklch(0.985 0 0);
  --primary-dark:       var(--xos-primary-700);

  /* ---- Chart accents (shared) --------------------------------------------- */
  --chart-1: oklch(0.646 0.222 41.116);   /* orange */
  --chart-2: oklch(0.6571 0.1279 228.83); /* brand blue */
  --chart-3: oklch(0.398 0.07 227.392);   /* deep blue */
  --chart-4: oklch(0.828 0.189 84.429);   /* amber */
  --chart-5: oklch(0.769 0.188 70.08);    /* gold */
  --golden:   #BF9304;                    /* verified/golden-tick */
  --golden-light: #DDBF6A;

  /* ---- Radii -------------------------------------------------------------- */
  --radius:     0.625rem; /* 10px — shadcn base */
  --radius-sm:  calc(var(--radius) - 4px);
  --radius-md:  calc(var(--radius) - 2px);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 12px);
  --radius-full: 9999px;

  /* ---- Spacing (Tailwind rem scale, most-used) ---------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */

  /* ---- Shadows (shadcn xs/sm/md; brand apps use xs + sm liberally) ------- */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-focus: 0 0 0 3px oklch(from var(--primary) l c h / 0.25);

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* Product-themed overrides: add class on <html> or a containing element */
.theme-xos {
  --primary: var(--xos-primary-600);
  --primary-dark: var(--xos-primary-700);
  --ring: var(--xos-primary-600);
}
.theme-mtv {
  --primary: var(--mtv-primary-300);
  --primary-dark: var(--mtv-primary-700);
  --ring: var(--mtv-primary-300);
}

/* Dark mode (both apps ship it; slate-950 surface) */
.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card:       oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover:    oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --muted:      oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent:     oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --border:     oklch(1 0 0 / 0.1);
  --input:      oklch(1 0 0 / 0.15);
}

/* =============================================================
   Semantic typography — use these classes on real elements.
   ============================================================= */
.ds-display { font: var(--weight-bold) var(--text-display)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
.ds-h1      { font: var(--weight-bold) var(--text-h1)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
.ds-h2      { font: var(--weight-semibold) var(--text-h2)/var(--leading-snug) var(--font-sans); }
.ds-h3      { font: var(--weight-semibold) var(--text-h3)/var(--leading-snug) var(--font-sans); }
.ds-h4      { font: var(--weight-semibold) var(--text-h4)/var(--leading-snug) var(--font-sans); }
.ds-body    { font: var(--weight-regular) var(--text-body)/var(--leading-normal) var(--font-sans); }
.ds-base    { font: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans); }
.ds-small   { font: var(--weight-regular) var(--text-small)/var(--leading-normal) var(--font-sans); color: var(--muted-foreground); }
.ds-label   { font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted-foreground); }
.ds-mono    { font: var(--weight-regular) var(--text-small)/var(--leading-normal) var(--font-mono); }

/* Normalize headings so they pick up the scale with no classes */
h1 { font: var(--weight-bold) var(--text-h1)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
h2 { font: var(--weight-semibold) var(--text-h2)/var(--leading-snug) var(--font-sans); }
h3 { font: var(--weight-semibold) var(--text-h3)/var(--leading-snug) var(--font-sans); }
h4 { font: var(--weight-semibold) var(--text-h4)/var(--leading-snug) var(--font-sans); }
p  { font: var(--weight-regular) var(--text-body)/var(--leading-normal) var(--font-sans); }
body { font-family: var(--font-sans); color: var(--foreground); background: var(--background); }