/*
 * Microsoft Fluent 2 Design Tokens — MME website
 * Source: https://fluent2.microsoft.design/ and @fluentui/react-components
 * Theme: Light mode, brand = Communication Blue (Microsoft's default brand ramp)
 *
 * Use these tokens AS-IS. Do not rename, do not edit values without spec.
 * This is the contract between Stitch/designer and Odoo views.
 */

:root {
  /* ===== BRAND RAMP — Communication Blue ===== */
  --f2-brand-10: #061724;
  --f2-brand-20: #082338;
  --f2-brand-30: #0A2E4A;
  --f2-brand-40: #0C3B5E;
  --f2-brand-50: #0E4775;
  --f2-brand-60: #0F548C;
  --f2-brand-70: #115EA3;
  --f2-brand-80: #0F6CBD;  /* primary fill */
  --f2-brand-90: #2886DE;
  --f2-brand-100: #479EF5;
  --f2-brand-110: #62ABF5;
  --f2-brand-120: #77B7F7;
  --f2-brand-130: #96C6FA;
  --f2-brand-140: #B4D6FA;
  --f2-brand-150: #CFE4FA;
  --f2-brand-160: #EBF3FC;

  /* ===== NEUTRAL FOREGROUND (text) ===== */
  --f2-fg-1: #242424;
  --f2-fg-2: #424242;
  --f2-fg-3: #707070;
  --f2-fg-4: #BDBDBD;
  --f2-fg-disabled: #BDBDBD;
  --f2-fg-inverted: #FFFFFF;
  --f2-fg-on-brand: #FFFFFF;

  /* ===== NEUTRAL BACKGROUND ===== */
  --f2-bg-1: #FFFFFF;
  --f2-bg-1-hover: #F5F5F5;
  --f2-bg-1-pressed: #E0E0E0;
  --f2-bg-1-selected: #EBEBEB;
  --f2-bg-2: #FAFAFA;
  --f2-bg-2-hover: #F0F0F0;
  --f2-bg-3: #F5F5F5;
  --f2-bg-4: #F0F0F0;       /* canvas */
  --f2-bg-5: #EBEBEB;
  --f2-bg-6: #E6E6E6;
  --f2-bg-disabled: #F0F0F0;
  --f2-bg-subtle-hover: #F5F5F5;
  --f2-bg-subtle-pressed: #E0E0E0;

  /* ===== STROKE (borders) ===== */
  --f2-stroke-1: #D1D1D1;
  --f2-stroke-2: #E0E0E0;
  --f2-stroke-3: #F0F0F0;
  --f2-stroke-accessible: #616161;
  --f2-stroke-accessible-hover: #575757;
  --f2-stroke-disabled: #E0E0E0;

  /* ===== BRAND-TINTED BACKGROUNDS / STROKES ===== */
  --f2-brand-bg-1: #EBF3FC;
  --f2-brand-bg-1-hover: #CFE4FA;
  --f2-brand-bg-1-pressed: #B4D6FA;
  --f2-brand-bg-1-selected: #CFE4FA;
  --f2-brand-bg: #0F6CBD;
  --f2-brand-bg-hover: #115EA3;
  --f2-brand-bg-pressed: #0C3B5E;
  --f2-brand-bg-selected: #0F548C;
  --f2-brand-stroke-1: #0F6CBD;
  --f2-brand-stroke-2: #B4D6FA;
  --f2-brand-stroke-2-contrast: #5C9DE5;
  --f2-brand-fg-1: #0F6CBD;
  --f2-brand-fg-2: #115EA3;
  --f2-brand-fg-link: #0F548C;
  --f2-brand-fg-link-hover: #115EA3;

  /* ===== SEMANTIC — Success (Sherwood) ===== */
  --f2-success-bg-1: #F1FAF1;
  --f2-success-bg-2: #9FD89F;
  --f2-success-bg-3: #107C10;
  --f2-success-fg-1: #0E700E;
  --f2-success-fg-3: #FFFFFF;
  --f2-success-border-1: #9FD89F;
  --f2-success-border-2: #107C10;

  /* ===== SEMANTIC — Warning (Marigold) ===== */
  --f2-warning-bg-1: #FFF4CE;
  --f2-warning-bg-3: #BC4B09;
  --f2-warning-fg-1: #835A00;
  --f2-warning-fg-3: #FFFFFF;
  --f2-warning-border-1: #F2C811;
  --f2-warning-border-2: #BC4B09;

  /* ===== SEMANTIC — Danger (Cranberry) ===== */
  --f2-danger-bg-1: #FDF3F4;
  --f2-danger-bg-3: #B10E1C;
  --f2-danger-fg-1: #B10E1C;
  --f2-danger-fg-3: #FFFFFF;
  --f2-danger-border-1: #EEACB2;
  --f2-danger-border-2: #B10E1C;

  /* ===== TYPOGRAPHY ===== */
  --f2-font: 'Segoe UI Variable', 'Segoe UI Variable Static Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f2-font-mono: 'Cascadia Mono', 'Consolas', 'SF Mono', Menlo, monospace;

  /* Sizes (matches Fluent ramps) */
  --f2-fs-100: 10px;   /* caption2 */
  --f2-fs-200: 12px;   /* caption1 */
  --f2-fs-300: 14px;   /* body1, default */
  --f2-fs-400: 16px;   /* body2 */
  --f2-fs-500: 20px;   /* subtitle2 */
  --f2-fs-600: 24px;   /* subtitle1 */
  --f2-fs-700: 28px;   /* title3 */
  --f2-fs-800: 32px;   /* title2 */
  --f2-fs-900: 40px;   /* title1 */
  --f2-fs-1000: 68px;  /* largeTitle */

  /* Weights (sentence case + 600 semibold for hierarchy) */
  --f2-fw-regular: 400;
  --f2-fw-medium: 500;
  --f2-fw-semibold: 600;
  --f2-fw-bold: 700;

  /* Line heights */
  --f2-lh-100: 14px;
  --f2-lh-200: 16px;
  --f2-lh-300: 20px;
  --f2-lh-400: 22px;
  --f2-lh-500: 28px;
  --f2-lh-600: 32px;
  --f2-lh-700: 36px;
  --f2-lh-800: 40px;
  --f2-lh-900: 52px;

  /* ===== RADIUS ===== */
  --f2-radius-none: 0;
  --f2-radius-xs: 2px;
  --f2-radius-sm: 4px;       /* default — buttons, inputs */
  --f2-radius-md: 6px;
  --f2-radius-lg: 8px;       /* cards */
  --f2-radius-xl: 12px;
  --f2-radius-xxl: 16px;
  --f2-radius-pill: 9999px;

  /* ===== SPACING ===== */
  --f2-sp-none: 0;
  --f2-sp-xxs: 2px;
  --f2-sp-xs: 4px;
  --f2-sp-snudge: 6px;
  --f2-sp-s: 8px;
  --f2-sp-mnudge: 10px;
  --f2-sp-m: 12px;
  --f2-sp-l: 16px;
  --f2-sp-xl: 20px;
  --f2-sp-xxl: 24px;
  --f2-sp-xxxl: 32px;

  /* ===== STROKE WIDTH ===== */
  --f2-sw-5: 0.5px;
  --f2-sw-10: 1px;
  --f2-sw-15: 1.5px;
  --f2-sw-20: 2px;
  --f2-sw-30: 3px;

  /* ===== SHADOWS ===== */
  --f2-shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --f2-shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --f2-shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --f2-shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  --f2-shadow-28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
  --f2-shadow-64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14);
  --f2-shadow-2-brand: 0 0 2px rgba(15,108,189,0.30), 0 1px 2px rgba(15,108,189,0.25);
  --f2-shadow-8-brand: 0 0 2px rgba(15,108,189,0.30), 0 4px 8px rgba(15,108,189,0.25);

  /* ===== MOTION ===== */
  --f2-dur-ultrafast: 50ms;
  --f2-dur-faster: 100ms;
  --f2-dur-fast: 150ms;
  --f2-dur-normal: 200ms;
  --f2-dur-slow: 300ms;
  --f2-dur-slower: 400ms;
  --f2-easing-accel-mid: cubic-bezier(1, 0, 1, 1);
  --f2-easing-decel-mid: cubic-bezier(0, 0, 0, 1);
  --f2-easing-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);

  /* ===== CONTROL HEIGHT ===== */
  --f2-h-small: 24px;
  --f2-h-medium: 32px;     /* default */
  --f2-h-large: 40px;
}

/* ============================================================
   COMPONENT BASE STYLES — apply Fluent 2 patterns
   ============================================================ */

body, .f2-root {
  font-family: var(--f2-font);
  color: var(--f2-fg-1);
  background: var(--f2-bg-4);
  font-size: var(--f2-fs-300);
  line-height: var(--f2-lh-300);
}

/* --- BUTTON --- */
.f2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f2-sp-snudge);
  height: var(--f2-h-medium);
  padding: 0 var(--f2-sp-m);
  border-radius: var(--f2-radius-sm);
  border: var(--f2-sw-10) solid transparent;
  font-family: inherit;
  font-size: var(--f2-fs-300);
  font-weight: var(--f2-fw-semibold);
  cursor: pointer;
  transition: background var(--f2-dur-faster) var(--f2-easing-easy-ease);
}
.f2-btn-primary {
  background: var(--f2-brand-bg);
  color: var(--f2-fg-on-brand);
}
.f2-btn-primary:hover { background: var(--f2-brand-bg-hover); }
.f2-btn-primary:active { background: var(--f2-brand-bg-pressed); }
.f2-btn-secondary {
  background: var(--f2-bg-1);
  color: var(--f2-fg-1);
  border-color: var(--f2-stroke-1);
}
.f2-btn-secondary:hover { background: var(--f2-bg-1-hover); }
.f2-btn-subtle {
  background: transparent;
  color: var(--f2-fg-1);
}
.f2-btn-subtle:hover { background: var(--f2-bg-subtle-hover); }
.f2-btn-small { height: var(--f2-h-small); font-size: var(--f2-fs-200); padding: 0 var(--f2-sp-s); }
.f2-btn-large { height: var(--f2-h-large); padding: 0 var(--f2-sp-l); }

/* --- INPUT --- */
.f2-input {
  display: flex;
  align-items: center;
  gap: var(--f2-sp-s);
  height: var(--f2-h-medium);
  padding: 0 var(--f2-sp-mnudge);
  background: var(--f2-bg-1);
  border: var(--f2-sw-10) solid var(--f2-stroke-1);
  border-bottom: var(--f2-sw-10) solid var(--f2-stroke-accessible);
  border-radius: var(--f2-radius-sm) var(--f2-radius-sm) 0 0;
  color: var(--f2-fg-1);
  font-size: var(--f2-fs-300);
  transition: border-bottom-color var(--f2-dur-faster);
}
.f2-input:focus-within {
  border-bottom: var(--f2-sw-20) solid var(--f2-brand-stroke-1);
}
.f2-input input {
  flex: 1; border: none; outline: none; font: inherit; color: inherit; background: transparent;
}

/* --- CARD --- */
.f2-card {
  background: var(--f2-bg-1);
  border: var(--f2-sw-10) solid var(--f2-stroke-2);
  border-radius: var(--f2-radius-lg);
  box-shadow: var(--f2-shadow-2);
  padding: var(--f2-sp-l);
}

/* --- PILL / TAG / BADGE --- */
.f2-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--f2-sp-xs);
  padding: 2px var(--f2-sp-s);
  border-radius: var(--f2-radius-sm);
  font-size: var(--f2-fs-200);
  font-weight: var(--f2-fw-semibold);
}
.f2-tag-pill { border-radius: var(--f2-radius-pill); padding: var(--f2-sp-xs) var(--f2-sp-mnudge); }
.f2-tag-brand { background: var(--f2-brand-bg-1); color: var(--f2-brand-fg-1); }
.f2-tag-success { background: var(--f2-success-bg-1); color: var(--f2-success-fg-1); }
.f2-tag-warning { background: var(--f2-warning-bg-1); color: var(--f2-warning-fg-1); }
.f2-tag-danger { background: var(--f2-danger-bg-1); color: var(--f2-danger-fg-1); }

/* --- MESSAGEBAR --- */
.f2-msg {
  display: flex; align-items: center; gap: var(--f2-sp-m);
  padding: var(--f2-sp-mnudge) var(--f2-sp-l);
  background: var(--f2-brand-bg-1);
  border: var(--f2-sw-10) solid var(--f2-brand-stroke-2);
  border-left: var(--f2-sw-30) solid var(--f2-brand-stroke-1);
  border-radius: var(--f2-radius-sm);
}
.f2-msg-warning { background: var(--f2-warning-bg-1); border-color: var(--f2-warning-border-1); border-left-color: var(--f2-warning-border-2); }
.f2-msg-error { background: var(--f2-danger-bg-1); border-color: var(--f2-danger-border-1); border-left-color: var(--f2-danger-border-2); }
.f2-msg-success { background: var(--f2-success-bg-1); border-color: var(--f2-success-border-1); border-left-color: var(--f2-success-border-2); }

/* --- PERSONA --- */
.f2-persona { display: inline-flex; align-items: center; gap: var(--f2-sp-s); }
.f2-avatar { width: 32px; height: 32px; border-radius: var(--f2-radius-pill); background: var(--f2-brand-bg); color: var(--f2-fg-on-brand); display: inline-flex; align-items: center; justify-content: center; font-size: var(--f2-fs-200); font-weight: var(--f2-fw-semibold); flex-shrink: 0; }
.f2-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.f2-avatar-lg { width: 48px; height: 48px; font-size: var(--f2-fs-400); }

/* --- TYPOGRAPHY UTILITIES --- */
.f2-title-1 { font-size: var(--f2-fs-900); line-height: var(--f2-lh-800); font-weight: var(--f2-fw-semibold); letter-spacing: -0.01em; }
.f2-title-2 { font-size: var(--f2-fs-800); line-height: var(--f2-lh-700); font-weight: var(--f2-fw-semibold); }
.f2-title-3 { font-size: var(--f2-fs-700); line-height: var(--f2-lh-600); font-weight: var(--f2-fw-semibold); }
.f2-subtitle-1 { font-size: var(--f2-fs-600); line-height: var(--f2-lh-500); font-weight: var(--f2-fw-semibold); }
.f2-subtitle-2 { font-size: var(--f2-fs-500); line-height: var(--f2-lh-500); font-weight: var(--f2-fw-semibold); }
.f2-body-1-strong { font-size: var(--f2-fs-300); line-height: var(--f2-lh-300); font-weight: var(--f2-fw-semibold); }
.f2-body-1 { font-size: var(--f2-fs-300); line-height: var(--f2-lh-300); font-weight: var(--f2-fw-regular); }
.f2-caption-1 { font-size: var(--f2-fs-200); line-height: var(--f2-lh-200); font-weight: var(--f2-fw-regular); }
.f2-caption-1-strong { font-size: var(--f2-fs-200); line-height: var(--f2-lh-200); font-weight: var(--f2-fw-semibold); }
.f2-mono { font-family: var(--f2-font-mono); }

/* --- LINK --- */
.f2-link { color: var(--f2-brand-fg-link); font-weight: var(--f2-fw-semibold); text-decoration: none; cursor: pointer; }
.f2-link:hover { color: var(--f2-brand-fg-link-hover); text-decoration: underline; }