/* ============================================================
   Mimoo Design System — Colors & Type Tokens
   Oceanic Tropical Palette
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face { font-family: "Maison Neue"; font-weight: 300; font-style: normal;
  src: url("./assets/fonts/57a78236-4962-453d-8a29-191bd5e74bab.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 300; font-style: italic;
  src: url("./assets/fonts/b1ee5443-1560-41bb-8746-3c2b72774ac3.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 400; font-style: normal;
  src: url("./assets/fonts/2e81968b-598d-4bcc-9553-ca83f93335e4.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 400; font-style: italic;
  src: url("./assets/fonts/71a11bef-38d2-4459-98b0-2ff00dc3ce98.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 500; font-style: normal;
  src: url("./assets/fonts/47ee07e5-f484-4565-be28-3b1b7412d195.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 500; font-style: italic;
  src: url("./assets/fonts/231b2037-4fd0-4e34-82a2-c5ac94db6763.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 600; font-style: normal;
  src: url("./assets/fonts/8d451647-0046-46d9-b9b6-2074fdec415a.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 600; font-style: italic;
  src: url("./assets/fonts/d2b664f1-1ed6-45a1-895c-dad5168a92da.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 700; font-style: normal;
  src: url("./assets/fonts/b9314f6e-498e-4e1b-b6fc-a1c136b3b791.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue"; font-weight: 700; font-style: italic;
  src: url("./assets/fonts/787c1927-7e26-4f82-9d7f-edd032bcaea9.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue Mono"; font-weight: 400; font-style: normal;
  src: url("./assets/fonts/17d6e720-4a2b-43ec-a47c-9e2fd7c30497.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Maison Neue Mono"; font-weight: 400; font-style: italic;
  src: url("./assets/fonts/0e13281b-3592-4ea2-9c31-de702fd42782.otf") format("opentype"); font-display: swap; }

:root {
  /* ---------- FONT FAMILIES ---------- */
  --font-sans: "Maison Neue", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Maison Neue Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---------- BACKGROUND / NEUTRALS ---------- */
  --bg-neutral-0:    #ffffff;  /* white base */
  --bg-neutral-100:  #f8fafc;  /* crisp off-white */
  --bg-neutral-200:  #f1f5f9;  /* soft water tint */
  --bg-neutral-300:  #e2e8f0;
  --bg-neutral-400:  #cbd5e1;
  --bg-neutral-500:  #64748b;
  --bg-neutral-700:  #334155;
  --bg-neutral-800:  #1e293b;
  --bg-neutral-900:  #0f172a;  /* deep ocean navy */
  --bg-black:        #000000;

  /* Tropical ocean hero gradient */
  --bg-gradient-top:    #0284c7;   /* sunlit ocean blue */
  --bg-gradient-bottom: #075985;   /* deep caribbean navy */
  --bg-hero-gradient:   linear-gradient(180deg, #0284c7 0%, #0369a1 50%, #075985 100%);
  --bg-team-gradient:   linear-gradient(180deg, #0369a1 0%, #0c4a6e 100%);

  /* ---------- BRAND PRIMARY (Mimoo Ocean Blue) ---------- */
  --primary-100: #0284c7;     /* ocean brand blue */
  --primary-hover: #0369a1;
  --primary-pressed: #075985;
  --primary-on: #ffffff;

  /* Supporting blues */
  --blue-sky:   #bae6fd;       /* soft pattern / accent */
  --blue-400:   #38bdf8;
  --blue-500:   #0ea5e9;
  --blue-700:   #0369a1;
  --blue-900:   #0c4a6e;
  --blue-ink:   #0f172a;

  /* ---------- ACCENT (Clownfish Orange / Coral) ---------- */
  --accent-orange: #ff7a45;   /* warm clownfish orange */
  --accent-warm:   #f97316;

  /* ---------- SECONDARY (neutrals used as buttons) ---------- */
  --secondary-100: #0f172a;
  --secondary-hover: #1e293b;
  --secondary-pressed: #334155;
  --secondary-on: #ffffff;

  /* ---------- ERROR ---------- */
  --error-100:   #ea4335;
  --error-hover: #dc3f32;
  --error-pressed: #cb362a;
  --error-on: #ffffff;

  /* ---------- SUCCESS ---------- */
  --success-100: #10b981;
  --success-900: #065f46;

  /* ---------- DISABLED ---------- */
  --disabled-default: #e2e8f0;
  --disabled-on:      #94a3b8;

  /* ---------- TEXT ---------- */
  --text-primary-100: #0f172a;          /* body on light */
  --text-primary-75:  rgba(15,23,42,0.75);
  --text-primary-50:  rgba(15,23,42,0.5);
  --text-primary-25:  rgba(15,23,42,0.25);
  --text-inverse-100: #ffffff;          /* body on dark/blue */
  --text-inverse-75:  rgba(255,255,255,0.85);
  --text-inverse-50:  rgba(255,255,255,0.65);
  --text-inverse-25:  rgba(255,255,255,0.35);
  --text-link:        var(--primary-100);
  --text-accent:      var(--accent-orange);

  /* ---------- STROKE / BORDERS ---------- */
  --stroke-100: #e2e8f0;
  --stroke-50:  rgba(226,232,240,0.5);
  --stroke-25:  rgba(226,232,240,0.25);
  --stroke-10:  rgba(226,232,240,0.10);
  --stroke-inverse-100: #ffffff;
  --stroke-inverse-50:  rgba(255,255,255,0.5);
  --stroke-inverse-25:  rgba(255,255,255,0.25);
  --stroke-inverse-10:  rgba(255,255,255,0.10);

  /* ---------- CARDS / SURFACES ---------- */
  --card-bg-light: #ffffff;
  --card-bg-dark:  #0f172a;
  --card-bg-over-image: rgba(15,23,42,0.6);
  --card-bg-tint:  #f0f9ff;                    /* soft ocean section bg */

  /* ---------- SEMANTIC TEXT STYLES (desktop) ---------- */
  --h-display-size: 116px;   --h-display-lh: 100%;  --h-display-ls: -0.02em;  --h-display-weight: 500;
  --h1-size: 80px;           --h1-lh: 105%;          --h1-ls: -0.02em;         --h1-weight: 500;
  --h2-size: 56px;           --h2-lh: 110%;          --h2-ls: -0.02em;         --h2-weight: 500;
  --h3-size: 48px;           --h3-lh: 115%;          --h3-ls: -0.02em;         --h3-weight: 500;
  --h4-size: 40px;           --h4-lh: 120%;          --h4-ls: -0.01em;         --h4-weight: 500;
  --h5-size: 32px;           --h5-lh: 125%;          --h5-ls: -0.01em;         --h5-weight: 500;
  --h6-size: 24px;           --h6-lh: 130%;          --h6-ls: 0;               --h6-weight: 500;
  --body-lg-size: 20px;      --body-lg-lh: 150%;     --body-lg-weight: 400;
  --body-md-size: 18px;      --body-md-lh: 150%;     --body-md-weight: 400;
  --body-sm-size: 16px;      --body-sm-lh: 150%;     --body-sm-weight: 400;
  --caption-size: 14px;      --caption-lh: 130%;     --caption-weight: 500;
  --eyebrow-size: 16px;      --eyebrow-lh: 100%;     --eyebrow-weight: 400;
  --overline-size: 12px;     --overline-lh: 110%;    --overline-weight: 500;

  /* ---------- SPACING ---------- */
  --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;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;   /* pills / status chips */
  --radius-2xl: 32px;  /* large cards */
  --radius-3xl: 48px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(15,23,42,0.06);
  --shadow-2: 0 4px 14px rgba(2,132,199,0.08);
  --shadow-3: 0 12px 32px rgba(2,132,199,0.12);
  --shadow-4: 0 24px 64px rgba(2,132,199,0.18);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --gutter-desktop: 80px;
  --gutter-tablet: 48px;
  --gutter-mobile: 16px;
  --grid-cols: 12;
  --grid-gap: 24px;
}

/* ---------- SEMANTIC ELEMENT DEFAULTS ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--text-primary-100);
  background: var(--bg-neutral-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-sans); letter-spacing: var(--h1-ls); margin: 0; }
h2, .h2 { font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-sans); letter-spacing: var(--h2-ls); margin: 0; }
h3, .h3 { font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-sans); letter-spacing: var(--h3-ls); margin: 0; }
h4, .h4 { font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-sans); letter-spacing: var(--h4-ls); margin: 0; }
h5, .h5 { font: var(--h5-weight) var(--h5-size)/var(--h5-lh) var(--font-sans); letter-spacing: var(--h5-ls); margin: 0; }
h6, .h6 { font: var(--h6-weight) var(--h6-size)/var(--h6-lh) var(--font-sans); margin: 0; }
.display { font: var(--h-display-weight) var(--h-display-size)/var(--h-display-lh) var(--font-sans); letter-spacing: var(--h-display-ls); margin: 0; }
p, .body { font: var(--body-md-weight) var(--body-md-size)/var(--body-md-lh) var(--font-sans); margin: 0; }
.body-lg { font: var(--body-lg-weight) var(--body-lg-size)/var(--body-lg-lh) var(--font-sans); }
.body-sm { font: var(--body-sm-weight) var(--body-sm-size)/var(--body-sm-lh) var(--font-sans); }
.caption  { font: var(--caption-weight) var(--caption-size)/var(--caption-lh) var(--font-sans); }
.eyebrow  { font: var(--eyebrow-weight) var(--eyebrow-size)/var(--eyebrow-lh) var(--font-mono); text-transform: none; letter-spacing: 0; }
.overline { font: var(--overline-weight) var(--overline-size)/var(--overline-lh) var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 16px; line-height: 1.5; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }

::selection { background: var(--primary-100); color: #fff; }

/*!
 * Tabler Icons 3.19.0 by tabler - https://tabler.io
 * License - https://github.com/tabler/tabler-icons/blob/master/LICENSE
 */
@font-face {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/6978eb4d-38f0-4f08-8253-e243ac649408.otf") format("woff2"),
       url("./assets/fonts/68d5d413-553e-4030-a394-619a617aea7d.otf") format("woff"),
       url("./assets/fonts/180cbde4-d203-43d0-be2d-3a3afd863cb0.otf") format("truetype");
}
.ti {
  font-family: "tabler-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ti-world:before { content: "\eb54"; }
.ti-download:before { content: "\ea96"; }
.ti-heart-filled:before { content: "\f67c"; }
.ti-eye-off:before { content: "\ecf0"; }
.ti-check:before { content: "\ea5e"; }
.ti-brand-android:before { content: "\ec16"; }
.ti-brand-google-play:before { content: "\ed25"; }
.ti-device-tv:before { content: "\ea8d"; }
.ti-brand-windows:before { content: "\ecd8"; }
.ti-clock:before { content: "\ea70"; }
.ti-brand-instagram:before { content: "\ec20"; }
.ti-x:before { content: "\eb55"; }
.ti-menu-2:before { content: "\ec42"; }
.ti-shield-check:before { content: "\eb23"; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
@keyframes swim { from { left: -20%; } to { left: 120%; } }
@keyframes swimRev { from { left: 120%; } to { left: -20%; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: .55; } 100% { transform: translateY(-460px) scale(.4); opacity: 0; } }
@keyframes pulse { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.08); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes tailwag { 0% { transform: rotate(-15deg); } 100% { transform: rotate(16deg); } }
@keyframes syncPulse { 0%,100% { opacity:.4; transform:scale(.85); } 50% { opacity:1; transform:scale(1.1); } }