/* ─────────────────────────────────────────────────────────────
   Infomaniak Design System — colors & type
   Source: Infomaniak IKDS Figma (Minimalist Design System File)
   Brand: Infomaniak — Swiss cloud, hosting & online tools
   ───────────────────────────────────────────────────────────── */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Thin.otf")        format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-ThinItalic.otf")  format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-UltraLight.otf")  format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-UltraLightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Light.otf")       format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Book.otf")        format("opentype"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-BookItalic.otf")  format("opentype"); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Regular.otf")     format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Medium.otf")      format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-SemiBold.otf")    format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Bold.otf")        format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-BoldItalic.otf")  format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Black.otf")       format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ── Brand / primary (blue) ───────────────────────────────
     Primary is #0098FF (blue/500). Used for CTAs, links,
     focus rings, data highlights, selection states. */
  --ik-blue-400: #4CB7FF;   /* hover lift on primary */
  --ik-blue-500: #0098FF;   /* PRIMARY — CTAs, links, focus */
  --ik-blue-600: #007ACC;   /* pressed primary (derived) */
  --ik-blue-700: #006AB2;   /* deep blue — headings on light */
  --ik-blue-050: #E6F5FF;   /* tinted surfaces (derived) */
  --ik-blue-100: #CCEAFF;   /* soft highlight (derived) */

  /* ── Neutrals (grayscale) ────────────────────────────────
     Warm-cool neutrals used across the product surfaces. */
  --ik-white:    #FFFFFF;
  --ik-gray-50:  #FAFAFA;   /* clickable-block background */
  --ik-gray-100: #F5F5F5;   /* hover background */
  --ik-gray-200: #F1F1F1;   /* secondary button fill */
  --ik-gray-300: #E0E0E0;   /* borders, dividers */
  --ik-gray-400: #9F9F9F;   /* disabled */
  --ik-gray-500: #666666;   /* body text */
  --ik-gray-600: #333333;   /* titles, labels */
  --ik-gray-700: #1A1A1A;   /* near-black */
  --ik-black:    #000000;

  /* ── Manager / app-chrome blues (dark sidebar family) ─── */
  --ik-manager-icon:       #85A2B6;   /* sidebar icons */
  --ik-manager-mid:        #607D8B;   /* history text in app chrome */
  --ik-manager-hover:      #000000;   /* hover (per Figma swatch) */
  --ik-manager-active:     #3E435B;   /* active */
  --ik-manager-bg:         #292E3D;   /* Left Menu background (rail) */
  --ik-manager-bg-submenu: #222633;   /* Product Sub Menu background (main-nav column) */

  /* ── Semantic surfaces ────────────────────────────────── */
  --ik-success-50:  #F2FBF3;
  --ik-success-100: #E0F8E2;
  --ik-success-500: #2FAE4A;   /* green — success */
  --ik-warning-500: #F5A623;   /* amber — warning */
  --ik-danger-500:  #E0443E;   /* red — destructive */
  --ik-info-500:    var(--ik-blue-500);

  /* ── Foreground / background aliases ──────────────────── */
  --fg-1: var(--ik-gray-600);   /* titles, labels */
  --fg-2: var(--ik-gray-500);   /* body copy */
  --fg-3: var(--ik-gray-400);   /* disabled / placeholder */
  --fg-inverse: var(--ik-white);
  --bg-1: var(--ik-white);
  --bg-2: var(--ik-gray-50);
  --bg-3: var(--ik-gray-100);
  --border: var(--ik-gray-300);
  --link: var(--ik-blue-500);

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;   /* color chips, cards */
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ── Elevation (subtle, flat-ish Swiss feel) ───────────── */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 1px rgba(16, 24, 40, 0.03);
  --shadow-2: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-3: 0 8px 24px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04);
  --shadow-focus: 0 0 0 3px rgba(0, 152, 255, 0.30);

  /* ── Spacing scale (4px base) ─────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Type family ──────────────────────────────────────── */
  --font-sans: "Suisse Int'l", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* ── Type scale (from Figma Titles/Body/Modale) ──────── */
  /* H1 — hero page titles */
  --h1-size: 24px;   --h1-line: 36px;   --h1-weight: 500;
  /* H2 — section titles */
  --h2-size: 18px;   --h2-line: 24px;   --h2-weight: 500;
  /* H3 — subsection titles */
  --h3-size: 16px;   --h3-line: 20px;   --h3-weight: 500;
  /* H3 regular — lighter large text */
  --h3r-size: 16px;  --h3r-line: 20px;  --h3r-weight: 400;
  /* Body 14 */
  --body-size: 14px; --body-line: 20px; --body-weight: 400;
  --body-md-weight: 500;
  /* Caption 12 */
  --caption-size: 12px; --caption-line: 16px; --caption-weight: 400;
  --caption-md-weight: 500;
  /* Modale title 18 */
  --modale-size: 18px; --modale-line: 24px; --modale-reg: 400; --modale-semi: 600;

  /* ── Motion ────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
}

/* ── Semantic type classes ──────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-1);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h1, h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); color: var(--fg-1); letter-spacing: -0.01em; }
.h2, h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); color: var(--fg-1); letter-spacing: -0.005em; }
.h3, h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); color: var(--fg-1); }
.h3-regular { font-size: var(--h3r-size); line-height: var(--h3r-line); font-weight: var(--h3r-weight); color: var(--fg-1); }

.body-14        { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--fg-2); }
.body-14-medium { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg-1); }
.caption        { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--fg-2); }
.caption-medium { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--fg-1); }

.modale-18-regular  { font-size: 18px; line-height: 24px; font-weight: 400; color: var(--fg-1); }
.modale-18-semibold { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--fg-1); }

/* Utility colors */
.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-link { color: var(--link); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus ring */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* Code / monospaced */
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 13px; }

/* ── Project-local additions (preserved across DS syncs) ── */
:root {
  --ik-soft: #F4F6FD;   /* soft blue page wash used in Manager screens */
}