/* FHS corporate pages. Generated from the design sample by tools/port/sync_app.py, then edited here.
   Every rule sits under #cp, the wrapper in ui-corporate/site/page.jsx. */
/* fhs-design-system copy: display, h1 and h2 weights set to Medium, as measured on the agency slides. */
/* ==========================================================================
   FHS DESIGN TOKENS — Future Hospitality Summit
   Single source of truth for all FHS digital surfaces.
   Generated from 01_FHS logo artwork + QUO application presentation (Apr 2024).
   Architecture: primitive → semantic → component. Import fonts/fonts.css first.
   ========================================================================== */
#cp {
  /* ------------------------------------------------------------------ */
  /* PRIMITIVE — raw values. Never reference these directly in UI code; */
  /* go through the semantic/component layers below.                    */
  /* ------------------------------------------------------------------ */

  /* Purple ramp (anchors: 600 = PANTONE 2077 C, 900 = PANTONE 2627 C) */
  --fhs-purple-50:  #F5F0F9;
  --fhs-purple-100: #EBE1F3;
  --fhs-purple-200: #D6C3E6;
  --fhs-purple-300: #BB9DD5;
  --fhs-purple-400: #9F76C2;
  --fhs-purple-500: #8557B1;
  --fhs-purple-600: #6E3FA1;  /* FHS Violet — PANTONE 2077 C */
  --fhs-purple-700: #5A3184;
  --fhs-purple-800: #4A2568;
  --fhs-purple-900: #3D1A51;  /* FHS Deep Purple — PANTONE 2627 C */
  --fhs-purple-950: #2A1038;

  /* Lavender ramp (anchor: 400 = PANTONE 2080 C) */
  --fhs-lavender-100: #F0E9F3;
  --fhs-lavender-200: #DFD0E5;
  --fhs-lavender-300: #C4A8CF;
  --fhs-lavender-400: #9A72AB;  /* FHS Lavender — PANTONE 2080 C */
  --fhs-lavender-500: #845C95;
  --fhs-lavender-600: #6D4A7C;

  /* Neutrals (purple-cast ink) */
  --fhs-neutral-0:   #FFFFFF;
  --fhs-neutral-50:  #FAF9FB;
  --fhs-neutral-100: #F4F2F6;
  --fhs-neutral-200: #E7E4EB;
  --fhs-neutral-300: #D3CEDA;
  --fhs-neutral-400: #A9A2B3;
  --fhs-neutral-500: #7F7789;
  --fhs-neutral-600: #5E5669;
  --fhs-neutral-700: #463E50;
  --fhs-neutral-800: #2E2839;
  --fhs-neutral-900: #1D1728;
  --fhs-neutral-950: #110D27;

  /* Feedback */
  --fhs-success: #1E7F4F;
  --fhs-warning: #B76E00;
  --fhs-danger:  #C0392B;

  /* Typography primitives */
  --font-display: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "SF Mono", Consolas, "Liberation Mono", monospace;

  --fw-xxthin: 100; --fw-xthin: 150; --fw-thin: 200; --fw-light: 400;
  /* Adobe Fonts kit xjp3jcj numbers Display one step up: Light 400, Roman 500, Medium 600 */
  --fw-roman: 500; --fw-medium: 600; --fw-bold: 700; --fw-black: 900;

  --fs-xs: 0.75rem;   --fs-sm: 0.875rem; --fs-base: 1rem;   --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;   --fs-2xl: 1.5rem;  --fs-3xl: 1.875rem;--fs-4xl: 2.375rem;
  --fs-5xl: 3rem;     --fs-6xl: 3.75rem; --fs-7xl: 4.75rem;

  --lh-none: 1; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-tight: -0.01em; --ls-wide: 0.05em; --ls-caps: 0.08em;

  /* Spacing (4px base) */
  --space-0: 0;      --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;   --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;
  --space-10: 2.5rem;--space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;
  --space-24: 6rem;  --space-32: 8rem;

  /* Radius — FHS geometry is sharp; default none/sm */
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px;

  /* Elevation (purple-tinted) */
  --shadow-sm: 0 1px 2px rgba(42, 16, 56, 0.08);
  --shadow-md: 0 4px 12px rgba(42, 16, 56, 0.12);
  --shadow-lg: 0 12px 32px rgba(42, 16, 56, 0.18);

  /* Brand geometry — 60°/30° isometric mark angles */
  --angle-brand: 60deg;
  /* NOT a 60-degree cut on most boxes: compute clip paths in px (references/brand-guidelines.md, section 6) */
  --clip-diagonal: polygon(0 0, 100% 0, 100% 100%, 18% 100%);
  --clip-diagonal-reverse: polygon(0 0, 82% 0, 100% 100%, 0 100%);

  /* Motion */
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------------ */
  /* SEMANTIC — purpose aliases. UI code references these.              */
  /* ------------------------------------------------------------------ */

  --color-bg:              var(--fhs-neutral-0);
  --color-bg-subtle:       var(--fhs-purple-50);
  --color-bg-muted:        var(--fhs-neutral-100);
  --color-bg-inverse:      var(--fhs-purple-900);
  --color-bg-inverse-deep: var(--fhs-purple-950);

  --color-text:            var(--fhs-neutral-900);
  --color-text-muted:      var(--fhs-neutral-600);
  --color-text-heading:    var(--fhs-purple-900);
  --color-text-inverse:    var(--fhs-neutral-0);
  --color-text-inverse-muted: var(--fhs-lavender-300);

  --color-primary:         var(--fhs-purple-900);
  --color-accent:          var(--fhs-purple-600);
  --color-accent-hover:    var(--fhs-purple-700);
  --color-accent-active:   var(--fhs-purple-800);
  --color-secondary:       var(--fhs-lavender-400);

  --color-border:          var(--fhs-neutral-200);
  --color-border-strong:   var(--fhs-neutral-300);
  --color-border-inverse:  rgba(255, 255, 255, 0.24);

  --color-link:            var(--fhs-purple-600);
  --color-link-hover:      var(--fhs-purple-800);
  --color-focus-ring:      var(--fhs-purple-500);

  --color-success: var(--fhs-success);
  --color-warning: var(--fhs-warning);
  --color-danger:  var(--fhs-danger);

  /* ------------------------------------------------------------------ */
  /* COMPONENT — per-component knobs.                                   */
  /* ------------------------------------------------------------------ */

  /* Button */
  --button-radius: var(--radius-sm);
  --button-px: var(--space-6);
  --button-py: var(--space-3);
  --button-weight: var(--fw-medium);
  --button-primary-bg: var(--color-accent);
  --button-primary-text: var(--color-text-inverse);
  --button-primary-bg-hover: var(--color-accent-hover);
  --button-primary-bg-active: var(--color-accent-active);
  --button-secondary-text: var(--color-accent);
  --button-secondary-border: var(--color-accent);
  --button-secondary-bg-hover: var(--fhs-purple-50);
  --button-inverse-bg: var(--fhs-neutral-0);
  --button-inverse-text: var(--fhs-purple-900);
  --button-inverse-bg-hover: var(--fhs-lavender-100);
  --button-disabled-bg: var(--fhs-neutral-200);
  --button-disabled-text: var(--fhs-neutral-500);

  /* Card */
  --card-bg: var(--color-bg);
  --card-border: var(--color-border);
  --card-radius: var(--radius-md);
  --card-padding: var(--space-8);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Input */
  --input-bg: var(--color-bg);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-accent);
  --input-radius: var(--radius-sm);
  --input-px: var(--space-4);
  --input-py: var(--space-3);
  --input-placeholder: var(--fhs-neutral-400);

  /* Badge */
  --badge-radius: var(--radius-sm);
  --badge-solid-bg: var(--color-primary);
  --badge-solid-text: var(--color-text-inverse);
  --badge-tint-bg: var(--fhs-purple-100);
  --badge-tint-text: var(--fhs-purple-800);

  /* Slide */
  --slide-bg: var(--color-bg);
  --slide-bg-cover: var(--color-bg-inverse);
  --slide-title: var(--color-text-inverse);
  --slide-footer-text: var(--color-text-muted);
}
/* ==========================================================================
   Base element styling (opt-in via .fhs scope or apply to body)
   ========================================================================== */
#cp .fhs, #cp .fhs body {
  font-family: var(--font-text);
  font-weight: var(--fw-roman);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
#cp .fhs h1, #cp .fhs h2, #cp .fhs h3, #cp .fhs h4 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
}
#cp .fhs h1 { font-size: var(--fs-5xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
#cp .fhs h2 { font-size: var(--fs-4xl); font-weight: var(--fw-medium); }
#cp .fhs h3 { font-size: var(--fs-2xl); font-weight: var(--fw-medium); }
#cp .fhs a { color: var(--color-link); text-decoration: none; transition: color var(--motion-fast); }
#cp .fhs a:hover { color: var(--color-link-hover); text-decoration: underline; }
#cp .fhs :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
/* Utility: display headline in the FHS caps style */
#cp .fhs-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
/* Utility: overline/eyebrow label */
#cp .fhs-overline {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
/* Utility: inverse (purple) section */
#cp .fhs-inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
#cp .fhs-inverse h1, #cp .fhs-inverse h2, #cp .fhs-inverse h3 { color: var(--color-text-inverse); }
#cp .fhs-inverse a { color: var(--fhs-lavender-300); }
/* Utility: diagonal photo/panel crop (the FHS slide diagonal) */
#cp .fhs-clip-diagonal { clip-path: var(--clip-diagonal); }
#cp .fhs-clip-diagonal-reverse { clip-path: var(--clip-diagonal-reverse); }