/* ==========================================================================
   slot-theme.css
   Design tokens for the slot landing template.
   To reuse the template on another domain/brand, change ONLY this file:
   colours, font and radius are read by slot-landing.css via these variables.
   Current values are sampled from the PEPSI555 money site.
   ========================================================================== */

:root {
  /* Surfaces */
  --color-bg: #03091b;          /* page background */
  --color-header: #041424;      /* header, footer, bottom nav */
  --color-card: #0f2538;        /* cards, panels */
  --color-surface: #17354b;     /* secondary buttons, inputs, chips */

  /* Brand accent (primary buttons, highlights) */
  --color-primary: #fd6212;
  --color-primary-2: #fd1b12;
  --gradient-primary: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-2) 100%);
  --shadow-primary: 0 6px 18px rgba(253, 98, 18, .28);

  /* Text */
  --color-text: #ffffff;
  --color-text-soft: #f0f3fc;
  --color-muted: rgba(255, 255, 255, .55);

  /* Lines */
  --color-border: rgba(255, 255, 255, .10);
  --color-border-strong: rgba(255, 255, 255, .30);

  /* Typography */
  --font-base: "Helvetica Neue", Helvetica, Arial, "Noto Sans Thai", "Leelawadee UI", sans-serif;
  --fs-base: 16px;
  --lh-base: 1.75;

  /* Shape & layout */
  --radius: 10px;
  --radius-lg: 16px;
  --container: 1180px;
  --gutter: 16px;
  --header-h: 64px;
  --bottom-nav-h: 64px;
}