/*
  Lucky 6 Marketing — CSS Custom Properties (Design Tokens)
  ============================================================
  IMPORTANT: This file must be loaded via the child theme,
  NOT through Divi's Custom CSS field.

  Divi's CSS pipeline strips :root custom property blocks.
  Loading this through style.css or functions.php bypasses
  that and ensures all var(--x) references resolve correctly.

  How to load (choose one):
  -------------------------
  Option A — child theme style.css:
    Copy everything below the dashed line into your child
    theme's style.css, right after the theme header comment.

  Option B — functions.php enqueue:
    wp_enqueue_style( 'lucky6-vars', get_stylesheet_directory_uri() . '/lucky6-variables.css', array('divi-style'), '1.0' );
  ============================================================
*/

:root {
  /* Backgrounds */
  --bg:          #0b1812;   /* Page / section primary dark */
  --bg-2:        #111f17;   /* Alternate section bg (marquee, services, footer) */
  --bg-3:        #162b1e;   /* Card / hover state bg */

  /* Accent */
  --accent:      #ff963b;   /* Orange - CTAs, badges, highlights */
  --accent-dim:  #cc6820;   /* Dimmed orange - hover states */

  /* Text */
  --text:        #f0ede6;   /* Primary text (near-white warm) */
  --text-muted:  #7a9080;   /* Secondary / supporting text */
  --text-dim:    #3d5044;   /* Placeholder / disabled text */

  /* Borders */
  --border:      rgba(255, 255, 255, 0.07);  /* Subtle dividers */

  /* Brand colours (logo only) */
  --brand-coral: #d95570;   /* "LUCKY" wordmark */
  --brand-teal:  #4bbfbf;   /* "MARKETING" bar */

  /* Typography */
  --font-display: 'Gloock', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  /* Risograph grain SVGs */
  --riso-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --riso-grain-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}