/*
 * Design tokens for the public website: the only place colours, fonts, radii
 * and spacing are defined. Components in site.css use these variables only.
 *
 * Mirrors the Android app's theme (AppColors.kt / Theme.kt): same blue, same
 * neutrals, same badge colours, same Poppins. Change the brand here and the
 * whole site follows.
 */
:root {
  color-scheme: light;

  /* Brand (AppColors.Primary) */
  --color-primary: #2970FF;          /* Primary.Color500 */
  --color-primary-strong: #155EEF;   /* Primary.Color600: buttons, links, "View all" */
  --color-primary-soft: #E3ECFF;     /* badges, soft highlights */
  --color-primary-bg: #F3F6FD;       /* tinted sections */
  --color-on-primary: #FFFFFF;
  --gradient-brand: linear-gradient(135deg, #84ADFF 0%, #2970FF 55%, #155EEF 100%); /* gradient3_1 */

  /* Surfaces and text (RecreativeFacesColors, light) */
  --color-bg: #FCFCFD;               /* uiBackground: Neutral.Color25 */
  --wash: 1.8;                       /* strength of the cards' colour washes: on white they need more to show */
  --card-lift: var(--shadow-card);   /* light cards sit on a near-white page: a soft shadow separates them */
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF2F6;        /* chips, hovered controls: Neutral.Color100 */
  --color-floated: #EEF2F6;          /* uiFloated: the tile behind every face */
  --color-text: #202939;             /* textPrimary: Neutral.Color800 */
  --color-text-muted: #697586;       /* textSecondary: Neutral.Color500 */
  --color-border: #E3E8EF;           /* hairlines, a step lighter than uiBorder */
  --color-border-strong: #CDD5DF;    /* uiBorder: Neutral.Color300 */
  --color-inverse: #202939;          /* active chip */
  --color-on-inverse: #FFFFFF;

  /* Functional */
  --color-success: #00A64B;          /* Success.Color600 */
  --color-error: #F04438;            /* Error.Color500 */
  --color-promo: #F79009;            /* Promo.Color500 */
  --color-new: #FF943D;              /* Promo.New: NewBadge */
  --color-discount: #FF3D6A;         /* Promo.Discount: DiscountBadge */
  --color-popular: #FDB022;          /* Promo.Color400: PopularBadge */
  --gradient-premium: linear-gradient(135deg, #FFFAEB, #FFD699); /* Gradients.Gold */
  --color-on-premium: #6B4300;

  /* Watch frame: brushed-metal bezel around a black dial (hero, face page) */
  --watch-bezel: #000000;
  --watch-ring: linear-gradient(145deg, #6A6A70 0%, #1A1A1D 38%, #48484D 68%, #0F0F11 100%);
  --watch-shadow: 0 18px 36px -18px rgb(10 12 18 / 0.55), 0 4px 10px -4px rgb(10 12 18 / 0.25);
  --watch-shadow-hover: 0 26px 46px -18px rgb(10 12 18 / 0.6), 0 6px 14px -4px rgb(10 12 18 / 0.3);

  /* Overlays (lightbox, carousel controls) */
  --color-scrim: rgb(6 7 10 / 0.86);
  --color-glass: rgb(255 255 255 / 0.78);
  --color-glass-border: rgb(14 17 22 / 0.08);
  --color-on-glass: #202939;

  /* Type: Poppins, like the app (TextStyles.kt) */
  --font-sans: Poppins, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-title: clamp(1.125rem, 1.8vw, 1.375rem);
  --text-xl: clamp(1.75rem, 3.4vw, 2.5rem);
  --text-hero: clamp(2.25rem, 5.4vw, 3.75rem);
  --tracking-tight: -0.02em;

  /* Shape and spacing */
  --radius-sm: 10px;
  --radius-banner: 16px;             /* BannerItem, DesignerBadge */
  --radius-card: 20px;
  --radius-featured: 28px;           /* FeaturedFaceItem body */
  --radius-tile: 25%;                /* SharedWatchFaceItem: 30dp on a 120dp tile */
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px -12px rgb(16 24 40 / 0.12);
  --shadow-lift: 0 2px 4px rgb(16 24 40 / 0.05), 0 22px 40px -18px rgb(16 24 40 / 0.28);
  --shadow-hero: 0 12px 28px -8px rgb(16 24 40 / 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1240px;
  --header-height: 68px;
}

/* Dark: used when the system is dark and the visitor hasn't picked light, or
   when they picked dark. Keep the two blocks below identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary: #84ADFF;        /* Primary.Color300 */
    --color-primary-strong: #84ADFF;
    --color-primary-soft: #1A2440;
    --color-primary-bg: #0F131B;
    --color-on-primary: #0B1220;
    --color-bg: #101010;             /* uiBackground (dark) */
    --wash: 1;
    --card-lift: none;
    --color-surface: #161616;
    --color-surface-2: #222222;
    --color-floated: #1A1A1A;        /* uiFloated (dark) */
    --color-text: #F5F5F5;
    --color-text-muted: #A3A3A3;
    --color-border: #232323;
    --color-border-strong: #2A2A2A;  /* uiBorder (dark) */
    --color-inverse: #F5F5F5;
    --color-on-inverse: #101010;
    --color-glass: rgb(28 28 32 / 0.72);
    --color-glass-border: rgb(255 255 255 / 0.1);
    --color-on-glass: #F5F5F5;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 22px 40px -18px rgb(0 0 0 / 0.8);
    --shadow-hero: 0 12px 28px -8px rgb(0 0 0 / 0.8);
    --watch-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.04);
    --watch-shadow-hover: 0 26px 46px -18px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #84ADFF;
  --color-primary-strong: #84ADFF;
  --color-primary-soft: #1A2440;
  --color-primary-bg: #0F131B;
  --color-on-primary: #0B1220;
  --color-bg: #101010;
  --wash: 1;
  --card-lift: none;
  --color-surface: #161616;
  --color-surface-2: #222222;
  --color-floated: #1A1A1A;
  --color-text: #F5F5F5;
  --color-text-muted: #A3A3A3;
  --color-border: #232323;
  --color-border-strong: #2A2A2A;
  --color-inverse: #F5F5F5;
  --color-on-inverse: #101010;
  --color-glass: rgb(28 28 32 / 0.72);
  --color-glass-border: rgb(255 255 255 / 0.1);
  --color-on-glass: #F5F5F5;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 22px 40px -18px rgb(0 0 0 / 0.8);
  --shadow-hero: 0 12px 28px -8px rgb(0 0 0 / 0.8);
  --watch-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.04);
  --watch-shadow-hover: 0 26px 46px -18px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.08);
}