/*
 Theme Name: Alloy Child Standard
 Template: alloy-core
*/

@import url("https://use.typekit.net/bef2xuc.css");

:root {
  /* ==========================================================================
     1. BRAND IDENTITY (Tailwind Colors)
     These map directly to bg-primary, text-accent, etc.
     ========================================================================== */

  /* The main signature color - used for primary buttons and accents */
  --brand-primary:     #238B6C;

  /* Deep Navy-Charcoal - used for headers, footers, and dark sections */
  --brand-secondary:   #19232E;

  /* CTA color - used for high-conversion buttons and "Alert" bars */
  --brand-accent:      #D4A017;

  /* Default text color for the body - ensures high readability */
  --brand-text:        #212B36;


  /* ==========================================================================
     2. TYPOGRAPHY (Scraped by Parent Theme for Editor Sync)
     The Parent Theme "Scraper" uses these to update the Block Editor canvas.
     ========================================================================== */

  /* Heading Font - Applied to H1-H6 and .font-heading classes */
  --poppins-font:      green-fairy-full-combo, sans-serif;

  /* Body Font - Applied to paragraphs, buttons, and UI elements */
  --roboto-font:       capitana, sans-serif;

  /* Tailwind Aliases - Ensures the compiler uses the same stacks as the variables */
  --font-heading:      var(--poppins-font);
  --font-body:         var(--roboto-font);


  /* ==========================================================================
     3. SURFACE & BACKGROUNDS
     These control the "vibe" of your sections and cards.
     ========================================================================== */

  /* The default site-wide background (usually white or very light gray) */
  --brand-background:  #FFFFFF;

  /* Soft tint for alternating sections - provides visual separation */
  --color-surface:     #F4F7F6;

  /* Dark Mode / Card foundations */
  --brand-dark-bg:     #12171D;
  --brand-dark-card:   #1E262F;

  /* Muted brand tint for secondary UI elements (e.g., icons, borders) */
  --color-secondary:   #2C4B44;

  /* Deepest shade for high-contrast dark mode text */
  --color-primary-900: #12171D;


  /* ==========================================================================
     4. LAYOUT & GRID (Structural Overrides)
     These control the physical "shell" of the content.
     ========================================================================== */

  /* Max-width for centered content blocks in the Editor and Frontend */
  --container-content: 1280px;

  /* Border radius for cards and buttons (Shared across components) */
  --radius-standard:   8px;

  /* Default border color for inputs and dividers */
  --border-default:    #E5E7EB;


  /* ==========================================================================
     5. WORDPRESS SPACING PRESETS
     Overrides for the Gutenberg "Dimensions" panel settings.
     ========================================================================== */

  --wp--preset--spacing--60: 2.5rem;  /* Medium Spacing */
  --wp--preset--spacing--70: 5.75rem; /* Large Spacing */
  --wp--preset--spacing--80: 7.5rem;  /* Extra Large Spacing */
}