/**
 * Design System: Color Tokens
 *
 * Centralized CSS custom-property (variable) registry establishing the 
 * foundational color palette for the Sasaeru brand. These tokens ensure 
 * cross-component consistency and act as the single source of truth for 
 * theming both the frontend UI and the white-labeled WordPress dashboard.
 *
 * @package Sasaeru
 */

:root {
   /* ==========================================================================
       1. BRAND CORE
       Primary brand identity colors.
       ========================================================================== */
   --color-primary  : #FFC107;
   --color-secondary: #A2957A;
   --color-base     : #212121;
   --color-white    : #FFFFFF;

   /* Semantic Variants */
   --color-primary-light: #FFD760;
   /* Primarily utilized for pricing watermarks & highlights */

   /* ==========================================================================
       2. SURFACES & BACKGROUNDS
       Environmental colors for structural layout elements.
       ========================================================================== */
   --color-surface-bg    : #F4F4F4;
   --color-surface-card  : #FFFFFF;
   --color-surface-subtle: #EAE9E9;
   --color-surface-icon  : #F4F4F4;

   /* ==========================================================================
       3. TEXT HIERARCHY
       Typographic color assignments ensuring accessible contrast ratios.
       ========================================================================== */
   --color-text-base      : #212121;
   --color-text-subtle    : #737373;
   --color-text-muted     : #CCCCCC;
   --color-text-on-primary: #212121;
   --color-text-on-dark   : #FFFFFF;
   --color-text-error     : #DC3232;
   /* Validation & destructive actions */

   /* ==========================================================================
       4. BORDERS & DIVIDERS
       Structural lines for grouping and separation.
       ========================================================================== */
   --color-border-base   : #212121;
   --color-border-input  : #CCCCCC;
   --color-border-divider: #EAE9E9;

   /* ==========================================================================
       5. INTERACTIVE STATES
       Visual feedback colors for hover, active, and focus states.
       ========================================================================== */
   --color-hover-primary : #E6AE06;
   --color-active-primary: #CC9A06;
   --color-focus-ring    : #FFC107;

   /* ==========================================================================
       6. OVERLAYS & MODALS
       Alpha-channeled colors for depth and focus manipulation.
       ========================================================================== */
   --color-overlay-dark : rgba(0, 0, 0, 0.60);
   --color-overlay-glass: rgba(255, 255, 255, 0.92);

   /* ==========================================================================
       7. ILLUSTRATION SHADES
       Standardized greyscale spectrum for SVG and UI illustrations.
       ========================================================================== */
   --color-illus-black   : #000000;
   --color-illus-grey-100: #E6E6E6;
   --color-illus-grey-200: #DCDDDD;
   --color-illus-grey-300: #C9CACA;
   --color-illus-grey-400: #BFC0C0;
   --color-illus-grey-500: #9FA0A0;
   --color-illus-grey-600: #898989;
   --color-illus-white   : #FFFFFF;
}