/* =====================================================================
   BlancOne® Design System — Colors & Typography
   =====================================================================
   Source: BlancOne® Brand Manual (Brand Guidelines · Concept & Visual 2026)
   Primary typeface (print/brand): Mozaic Geo  (TipoType, paid)
   Web typeface:                  Outfit       (Google Fonts, included)
   Fallback typeface:             Arial
   --------------------------------------------------------------------- */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ---- Brand core ---- */
  --bo-cyan:           #009FE3;   /* Pantone Process Cyan · primary mark */
  --bo-cyan-600:       #0087C3;
  --bo-cyan-700:       #006FA1;
  --bo-cyan-300:       #5BC0EE;
  --bo-cyan-200:       #A6DDF5;
  --bo-cyan-100:       #DCEFFA;
  --bo-cyan-050:       #EEF7FD;

  --bo-deep-blue:      #1B2D60;   /* HOME+ NIGHT / institutional dark */
  --bo-deep-blue-800:  #142149;
  --bo-deep-blue-900:  #0B1430;
  --bo-deep-blue-600:  #2B3F7A;

  --bo-white:          #FFFFFF;
  --bo-off-white:      #F6FAFC;
  --bo-paper:          #EEF4F7;   /* subtle bg tint */

  /* Cool Gray 8 family + neutrals */
  --bo-gray-50:        #F4F6F8;
  --bo-gray-100:       #E7EBEE;
  --bo-gray-200:       #D2D7DC;
  --bo-gray-300:       #B5BCC4;
  --bo-gray-400:       #8B95A0;
  --bo-gray-500:       #6E7882;   /* Pantone Cool Gray 8 */
  --bo-gray-600:       #555D66;
  --bo-gray-700:       #3D444B;
  --bo-gray-800:       #262B30;
  --bo-gray-900:       #14171A;
  --bo-black:          #000000;

  /* ---- Product accent palette (from brand manual)
     Each BlancOne® product is identified by a specific colour.
     These are not freely interchangeable — only use them to mark
     the matching product / range. */
  --bo-product-click:        #EC7F20;   /* CLICK+ · in-office, fast        */
  --bo-product-touch:        #E00025;   /* TOUCH+ · sensitive teeth         */
  --bo-product-ultra:        #7F207D;   /* ULTRA+ · maximum whitening       */
  --bo-product-home:         #009FE3;   /* HOME+   · home maintenance       */
  --bo-product-home-fast:    #FFCC00;   /* HOME+ FAST                       */
  --bo-product-home-ever:    #2EA959;   /* HOME+ EVER (long-lasting)        */
  --bo-product-home-night:   #1B2D60;   /* HOME+ NIGHT (overnight)          */
  --bo-product-lips:         #F4AACC;   /* LIPS CARE                        */
  --bo-product-stick:        #B66532;   /* STICK CARE                       */
  --bo-product-arcus:        #7FB539;   /* ARCUS+                           */
  --bo-product-duetto:       #C73E7A;   /* DUETTO family                    */

  /* ---- Semantic surface / text ---- */
  --bo-bg:               var(--bo-white);
  --bo-bg-alt:           var(--bo-paper);
  --bo-bg-inverse:       var(--bo-deep-blue);
  --bo-bg-brand:         var(--bo-cyan);

  --bo-fg:               var(--bo-deep-blue-900);
  --bo-fg-1:             var(--bo-gray-800);   /* primary text                */
  --bo-fg-2:             var(--bo-gray-600);   /* secondary text              */
  --bo-fg-3:             var(--bo-gray-400);   /* muted / captions            */
  --bo-fg-on-brand:      var(--bo-white);      /* text over cyan / blue       */
  --bo-fg-link:          var(--bo-cyan-700);
  --bo-fg-link-hover:    var(--bo-cyan);

  --bo-border:           var(--bo-gray-100);
  --bo-border-strong:    var(--bo-gray-200);
  --bo-border-focus:     var(--bo-cyan);

  /* ---- Semantic feedback (clinical, restrained) ---- */
  --bo-success:          #2EA959;
  --bo-success-bg:       #E6F5EC;
  --bo-warning:          #FFCC00;
  --bo-warning-bg:       #FFF7D6;
  --bo-danger:           #E00025;
  --bo-danger-bg:        #FBE5E9;
  --bo-info:             var(--bo-cyan);
  --bo-info-bg:          var(--bo-cyan-050);

  /* ---- Typography stacks ---- */
  --bo-font-display: "Outfit", "Mozaic Geo", "Arial", system-ui, sans-serif;
  --bo-font-body:    "Outfit", "Mozaic Geo", "Arial", system-ui, sans-serif;
  --bo-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (1.2 ratio · 16px base) ---- */
  --bo-text-xs:    12px;
  --bo-text-sm:    14px;
  --bo-text-base:  16px;
  --bo-text-md:    18px;
  --bo-text-lg:    22px;
  --bo-text-xl:    28px;
  --bo-text-2xl:   34px;
  --bo-text-3xl:   44px;
  --bo-text-4xl:   56px;
  --bo-text-5xl:   72px;
  --bo-text-6xl:   96px;

  /* Brand-manual weights — Outfit ExtraBold for titles, Bold for subtitles, Regular for body */
  --bo-weight-regular: 400;
  --bo-weight-medium:  500;
  --bo-weight-semibold: 600;
  --bo-weight-bold:    700;
  --bo-weight-extrabold: 800;

  /* Line-height — display runs tight (0.95–1.0) per brand voice; body breathes at 1.55 */
  --bo-lh-tight:   0.95;
  --bo-lh-snug:    1.1;
  --bo-lh-normal:  1.4;
  --bo-lh-relaxed: 1.55;

  --bo-tracking-tight: -0.02em;
  --bo-tracking-normal: 0;
  --bo-tracking-wide:  0.04em;
  --bo-tracking-caps:  0.08em;

  /* ---- Spacing scale (4-pt base) ---- */
  --bo-space-0:  0;
  --bo-space-1:  4px;
  --bo-space-2:  8px;
  --bo-space-3:  12px;
  --bo-space-4:  16px;
  --bo-space-5:  20px;
  --bo-space-6:  24px;
  --bo-space-7:  32px;
  --bo-space-8:  40px;
  --bo-space-9:  48px;
  --bo-space-10: 64px;
  --bo-space-11: 80px;
  --bo-space-12: 96px;
  --bo-space-13: 128px;

  /* ---- Radius (rounded geometric — semicircular accents are full-pill) ---- */
  --bo-radius-xs:    4px;
  --bo-radius-sm:    8px;
  --bo-radius-md:   12px;
  --bo-radius-lg:   20px;
  --bo-radius-xl:   28px;
  --bo-radius-2xl:  40px;
  --bo-radius-pill: 999px;

  /* ---- Elevation / shadow (soft, clinical — never harsh) ---- */
  --bo-shadow-xs: 0 1px 2px rgba(20, 33, 73, 0.06);
  --bo-shadow-sm: 0 2px 6px rgba(20, 33, 73, 0.08);
  --bo-shadow-md: 0 8px 24px rgba(20, 33, 73, 0.10);
  --bo-shadow-lg: 0 16px 40px rgba(20, 33, 73, 0.14);
  --bo-shadow-glow-cyan: 0 12px 32px rgba(0, 159, 227, 0.32);
  --bo-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Motion — playful but controlled ---- */
  --bo-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --bo-ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --bo-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --bo-dur-1: 120ms;
  --bo-dur-2: 200ms;
  --bo-dur-3: 320ms;
  --bo-dur-4: 480ms;

  /* ---- Layout ---- */
  --bo-container:    1200px;
  --bo-container-narrow: 880px;
  --bo-gutter:       24px;
  --bo-section-y:    96px;
}

/* ---------- Element defaults ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--bo-font-body);
  font-size:   var(--bo-text-base);
  line-height: var(--bo-lh-relaxed);
  color:       var(--bo-fg-1);
  background:  var(--bo-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bo-font-display);
  font-weight: var(--bo-weight-extrabold);
  color: var(--bo-deep-blue);
  line-height: var(--bo-lh-tight);
  letter-spacing: var(--bo-tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--bo-text-5xl); }
h2 { font-size: var(--bo-text-3xl); }
h3 { font-size: var(--bo-text-2xl); }
h4 { font-size: var(--bo-text-xl); font-weight: var(--bo-weight-bold); }
h5 { font-size: var(--bo-text-lg); font-weight: var(--bo-weight-bold); }
h6 {
  font-size: var(--bo-text-sm);
  font-weight: var(--bo-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bo-tracking-caps);
  color: var(--bo-cyan-700);
}

p {
  margin: 0;
  font-size: var(--bo-text-base);
  line-height: var(--bo-lh-relaxed);
  color: var(--bo-fg-2);
  text-wrap: pretty;
}

a {
  color: var(--bo-fg-link);
  text-decoration: none;
  transition: color var(--bo-dur-1) var(--bo-ease-standard);
}
a:hover { color: var(--bo-fg-link-hover); }

small, .bo-caption {
  font-size: var(--bo-text-sm);
  color: var(--bo-fg-3);
}

/* Lead / deck — larger introductory body copy with tighter rhythm than running text */
.bo-lead {
  font-size: var(--bo-text-lg);
  font-weight: var(--bo-weight-medium);
  line-height: 1.3;
  color: var(--bo-fg-2);
  text-wrap: pretty;
}

/* utility — eyebrow used over titles */
.bo-eyebrow {
  display: inline-block;
  font-size: var(--bo-text-sm);
  font-weight: var(--bo-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bo-tracking-caps);
  color: var(--bo-cyan);
}

::selection { background: var(--bo-cyan); color: var(--bo-white); }