/* public/assets/css/tokens.css
   FORCEFORE design tokens for the public site (main-site, Bagsy and Gold Picker shared widgets).
   Colours and fonts are defined here only. Game palettes stay in their own _variables.css.
   One black, one white, one grey scale and one colour per meaning.
   Pick the closest existing token, never add a near-duplicate.
   Exception: a page or component with its own art direction keeps its exact design in a
   page-scoped section below (--ff-<page>-*), used only by that page's stylesheet. */

:root {
  /* Black and white */
  --ff-black: #000;
  --ff-white: #fff;

  /* Grey scale, from light surface to dark grey */
  --ff-gray-1: #f5f5f5; /* light surface */
  --ff-gray-2: #e6e6e6; /* line on light, soft text on black */
  --ff-gray-3: #ccc;    /* strong line, disabled, muted text on black */
  --ff-gray-4: #888;    /* muted text */
  --ff-gray-5: #555;    /* secondary text */
  --ff-gray-6: #333;    /* dark grey: hover and lines on black */

  /* Meaning (white bold text stays readable on each) */
  --ff-success: #16a34a; /* success, online dot, positive badge */
  --ff-danger: #dc2626;
  --ff-warning: #d97706; /* amber, also stars, coins and gold highlights */
  --ff-info: #2563eb;    /* links and info */

  /* Tinted backgrounds (work on light and dark surfaces) */
  --ff-success-bg: rgba(22, 163, 74, 0.12);
  --ff-danger-bg: rgba(220, 38, 38, 0.12);
  --ff-warning-bg: rgba(217, 119, 6, 0.12);
  --ff-info-bg: rgba(37, 99, 235, 0.12);

  /* Overlays and shadows */
  --ff-black-a10: rgba(0, 0, 0, 0.1);
  --ff-black-a25: rgba(0, 0, 0, 0.25);
  --ff-black-a50: rgba(0, 0, 0, 0.5);
  --ff-black-a70: rgba(0, 0, 0, 0.7);
  --ff-black-a90: rgba(0, 0, 0, 0.9);
  --ff-white-a10: rgba(255, 255, 255, 0.1);
  --ff-white-a20: rgba(255, 255, 255, 0.2);
  --ff-white-a40: rgba(255, 255, 255, 0.4);
  --ff-white-a60: rgba(255, 255, 255, 0.6);
  --ff-white-a85: rgba(255, 255, 255, 0.85);
  --ff-shadow-menu: 0 10px 22px var(--ff-black-a50);

  /* Fonts (self-hosted, see fonts.css) */
  --ff-font-body: 'Inter', sans-serif;
  --ff-font-display: 'Bebas Neue', sans-serif;
  --ff-font-condensed: 'Oswald', sans-serif;

  /* Beta program page (beta-program.css only): its own navy and purple art direction, original values */
  --ff-beta-navy-950: #050b22;
  --ff-beta-navy-800: #0d1f5e;
  --ff-beta-navy-600: #20409e;
  --ff-beta-sweep: rgba(120, 160, 255, 0.13);
  --ff-beta-window-top: #0e1226;
  --ff-beta-window-bottom: #090c1a;
  --ff-beta-modal-top: #11152c;
  --ff-beta-modal-bottom: #0a0d1c;
  --ff-beta-pop-bg: rgba(13, 15, 28, 0.94);
  --ff-beta-backdrop: rgba(2, 4, 12, 0.72);
  --ff-beta-ink: #06080f;
  --ff-beta-blue-800: #1b3a8f;
  --ff-beta-blue-700: #1432a0;
  --ff-beta-blue-500: #2b60ff;
  --ff-beta-sky-300: #7fb0ff;
  --ff-beta-link: #7fa0ff;
  --ff-beta-purple-700: #5b2da8;
  --ff-beta-purple-300: #b98cff;
  --ff-beta-violet-700: #4321a8;
  --ff-beta-violet-500: #7c3aed;
  --ff-beta-cyan-700: #0b6fb0;
  --ff-beta-cyan-500: #0ea5e9;
  --ff-beta-switch-off: #2a3566;
  --ff-beta-dot-red: #ff5f57;
  --ff-beta-dot-yellow: #febc2e;
  --ff-beta-dot-green: #28c840;
  --ff-beta-pop-text: #eef1fc;
  --ff-beta-row-text: #d6dcf5;
  --ff-beta-text: #d3d9f0;
  --ff-beta-ghost-text: #cdd5f0;
  --ff-beta-text-soft: #c3cbe6;
  --ff-beta-faq-text: #b3bbdb;
  --ff-beta-text-muted: #aeb7d8;
  --ff-beta-label: #9aa3c4;
  --ff-beta-text-off: #6b7494;
  --ff-beta-mint: #6ee7a0;
  --ff-beta-mint-bg: rgba(34, 197, 94, 0.16);
  --ff-beta-mint-line: rgba(34, 197, 94, 0.35);
  --ff-beta-gold: #f4c66a;
  --ff-beta-gold-bg: rgba(245, 180, 40, 0.16);
  --ff-beta-gold-line: rgba(245, 180, 40, 0.35);
  --ff-beta-nda: #ffd28a;
  --ff-beta-cooldown: #ff6b6b;
  --ff-beta-window-line: rgba(140, 170, 255, 0.28);
  --ff-beta-modal-line: rgba(140, 170, 255, 0.22);
  --ff-beta-glow-58: rgba(43, 96, 255, 0.58);
  --ff-beta-glow-30: rgba(43, 96, 255, 0.3);
  --ff-beta-glow-14: rgba(43, 96, 255, 0.14);
  --ff-beta-glow-4: rgba(43, 96, 255, 0.04);
  --ff-beta-ghost-btn-line: rgba(255, 255, 255, 0.28);
  --ff-beta-sheen: rgba(255, 255, 255, 0.25);
  --ff-beta-ghost-line: rgba(255, 255, 255, 0.22);
  --ff-beta-shimmer: rgba(255, 255, 255, 0.18);
  --ff-beta-pop-line: rgba(255, 255, 255, 0.13);
  --ff-beta-line: rgba(255, 255, 255, 0.12);
  --ff-beta-req-line: rgba(255, 255, 255, 0.09);
  --ff-beta-glass-6: rgba(255, 255, 255, 0.06);
  --ff-beta-row-line: rgba(255, 255, 255, 0.05);
  --ff-beta-card-bg: rgba(255, 255, 255, 0.045);
  --ff-beta-invite-bg: rgba(255, 255, 255, 0.04);
  --ff-beta-row-bg: rgba(255, 255, 255, 0.035);
  --ff-beta-glass-3: rgba(255, 255, 255, 0.03);
  --ff-beta-modal-shadow: rgba(0, 0, 0, 0.65);
  --ff-beta-window-shadow: rgba(0, 0, 0, 0.6);
  --ff-beta-card-shadow: rgba(0, 0, 0, 0.45);
  --ff-beta-label-bg: rgba(0, 0, 0, 0.35);
  --ff-beta-nda-bg: rgba(0, 0, 0, 0.28);

  /* Home page art (slider.css, slider.js, home sections of styles.css): hero slider, games band, featured games, manifesto, news cards, support section */
  --ff-home-slider-bg: #1a1a1a;
  --ff-home-slider-progress: #ff6200;
  --ff-home-slide-text-shadow: rgba(0, 0, 0, 0.6);
  --ff-home-dot-line: rgba(255, 255, 255, 0.7);
  --ff-home-dot-bg: rgba(0, 0, 0, 0.4);
  --ff-home-dot-hover: rgba(255, 255, 255, 0.5);
  --ff-home-games-band-top: #0b0f1a;
  --ff-home-games-band-mid: #070a12;
  --ff-home-games-band-bottom: #05070d;
  --ff-home-games-band-line: rgba(255, 255, 255, 0.08);
  --ff-home-scroll-text: rgba(255, 255, 255, 0.82);
  --ff-home-scroll-mouse: rgba(255, 255, 255, 0.55);
  --ff-home-scroll-wheel: rgba(255, 255, 255, 0.75);
  --ff-home-game-grey: #3b3b3b;
  --ff-home-game-dark: #101010;
  --ff-home-play-icon: rgba(255, 255, 255, 0.92);
  --ff-home-play-icon-line: rgba(255, 255, 255, 0.18);
  --ff-home-play-bg: rgba(0, 0, 0, 0.45);
  --ff-home-play-bg-hover: rgba(0, 0, 0, 0.62);
  --ff-home-manifesto-bottom: #f6f6f6;
  --ff-home-news-section-bg: #f7f7f7;
  --ff-home-news-image-bg: #e0e0e0;
  --ff-home-news-overlay-bottom: rgba(0, 0, 0, 0.88);
  --ff-home-news-overlay-mid: rgba(0, 0, 0, 0.55);
  --ff-home-support-top: #2b2b2b;
  --ff-home-support-bottom: #1b1b1b;
  --ff-home-support-card-line: rgba(255, 255, 255, 0.14);
  --ff-home-support-card-shadow: rgba(0, 0, 0, 0.28);
  --ff-home-support-card-hover: rgba(0, 0, 0, 0.24);
  --ff-home-support-card-shadow-hover: rgba(0, 0, 0, 0.38);
  --ff-home-media-shadow-hover: rgba(0, 0, 0, 0.48);
  --ff-home-shade-35: rgba(0, 0, 0, 0.35);
  --ff-home-shade-22: rgba(0, 0, 0, 0.22);
  --ff-home-shade-18: rgba(0, 0, 0, 0.18);
  --ff-home-shade-12: rgba(0, 0, 0, 0.12);
  --ff-home-shade-8: rgba(0, 0, 0, 0.08);
  --ff-home-shade-6: rgba(0, 0, 0, 0.06);
  --ff-home-shade-5: rgba(0, 0, 0, 0.05);

  /* News page cards (news_styles.css only) */
  --ff-news-card-bg: #f0f0f0;
  --ff-news-image-bg: #e0e0e0;
  --ff-news-image-bg-lead: #d0d0d0;
  --ff-news-overlay-bottom: rgba(0, 0, 0, 0.95);
  --ff-news-overlay-mid: rgba(0, 0, 0, 0.8);
  --ff-news-overlay-top: rgba(0, 0, 0, 0.05);
  --ff-news-card-shadow-hover: rgba(0, 0, 0, 0.15);

  /* News article page (article_styles.css only): its own slate and blue reading theme */
  --ff-article-page-bg: #f0f2f5;
  --ff-article-text: #34495e;
  --ff-article-date: #7f8c8d;
  --ff-article-link: #3498db;
  --ff-article-link-hover: #2980b9;
  --ff-article-quote-line: #bdc3c7;
  --ff-article-separator: #e0e0e0;
  --ff-article-placeholder-bg: #e9ecef;
  --ff-article-placeholder-text: #adb5bd;
  --ff-article-hero-shade: rgba(0, 0, 0, 0.15);
  --ff-article-image-shadow: rgba(0, 0, 0, 0.08);

  /* Game detail and game cards on the profile (profil-games.css only) */
  --ff-games-cover-bg: #e0e0e0;
  --ff-games-cover-icon: #9ca3af;
  --ff-games-progress-track: #c4c8cf;
  --ff-games-ach-progress-track: #f0f2f5;
  --ff-games-ach-icon-bg: #f0f0f0;
  --ff-games-ach-icon: #777;
  --ff-games-ach-icon-line: #d9d9d9;
  --ff-games-hero-shade-bottom: rgba(0, 0, 0, 0.85);
  --ff-games-hero-shade-top: rgba(0, 0, 0, 0.3);
  --ff-games-card-shadow-hover: rgba(0, 0, 0, 0.15);

  /* Shop promotional art (shop.css only): sale and pre-order badges, stars, coins, hero shading */
  --ff-shop-sale: #ff5a4d;
  --ff-shop-preorder: #c0392b;
  --ff-shop-preorder-bright: #f00b0b;
  --ff-shop-cart-count: #ff5a5f;
  --ff-shop-preorder-note-bg: #fdecea;
  --ff-shop-preorder-note-bg-soft: #fbeae8;
  --ff-shop-preorder-note-line: #f2c9c3;
  --ff-shop-star: #f5a623;
  --ff-shop-star-empty: #d9d9d9;
  --ff-shop-coins: #f5c542;
  --ff-shop-coins-bright: #ffd54a;
  --ff-shop-hero-dot: #3a3a3a;
  --ff-shop-image-bg: #e0e0e0;
  --ff-shop-suggest-image-bg: #eee;
  --ff-shop-thumb-bg: #e8e8e8;
  --ff-shop-cart-image-bg: #222;
  --ff-shop-hero-shade: rgba(0, 0, 0, 0.65);
  --ff-shop-hero-shade-mobile: rgba(0, 0, 0, 0.6);

  /* Media placeholders and video controls (image-selector.css, profil-feed.css) */
  --ff-media-video-placeholder-top: #1a1a1a;
  --ff-media-video-placeholder-bottom: #0a0a0a;
  --ff-media-video-controls: rgba(0, 0, 0, 0.85);

  /* Account moderation warning levels (account-moderation.css only): minor, major */
  --ff-moderation-warn: #f59e0b;
  --ff-moderation-warn-minor: #facc15;
  --ff-moderation-warn-major: #f97316;
  /* Account moderation dark panels and info box (original values, readable on black) */
  --ff-moderation-panel: #1a1a1a;
  --ff-moderation-info-bg: rgba(59, 130, 246, 0.12);
  --ff-moderation-info-line: #3b82f6;
  --ff-moderation-info-text: #cfe3ff;
  /* Support guest ticket link on a dark card (support.css only) */
  --ff-support-link-on-dark: #7fb0ff;
}