/* ==========================================================================
   EASME EVOLAB — Design Tokens
   ==========================================================================
   single source of truth for all visual primitives.
   palette blends AU brand influence with the demo biotech/mid-century theme
   and colors.txt overrides.

   precedence (high → low):
     1. colors.txt overrides
     2. AU brand palette
     3. demo.css mid-century direction
   ========================================================================== */

/* --- fonts (google fonts embed in index.php) --- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {

   /* EASME PALETTE TOKENS */

   /* pattern: pairwise background/foreground colors (e.g. light/dark mode)
   odd pairs (one, two, three, ...) are primarily light mode, 
   even pairs (two, four, six, ...) are primarily dark mode,
   but all can be used flexibly for any purpose. */

   /* *rand-o* ***!*** alone, or in pairs, *ATOMIC AGE TOKENS* are marvels of modern scientific wonder 
        when you need a quick blast of stylesheet energy, remember a-t-o-m-i-c, thats the way to do it! */

   --atomic-fg-dark-accent-one: #0a6c6c; /* deep teal for primary brand elements and accents */
   --atomic-fg-lite-accent-one: #0a6c6c; /* deep teal for primary brand elements and accents */
   --atomic-fg-one: #2a2622;   /* foreground color for pair "one" (mode=0:fg=dark/bg=lite) */
   --atomic-bg-one: #ffffff;   /* background color for pair "one" (mode=0:fg=dark/bg=lite) */
   --atomic-fg-two: #f0ede6;   /* foreground color for pair "two" (mode=1:fg=lite/bg=dark) */
   --atomic-bg-two: #5c5650;   /* background color for pair "two" (mode=1:fg=lite/bg=dark) */
   --atomic-fg-three: #8f877d; /* ... mode=0:fg=dark/bg=lite ... */
   --atomic-bg-three: #eae6dd; /* ... mode=0:fg=dark/bg=lite ... */
   --atomic-fg-four: #aacefa;  /* ... mode=1:fg=lite/bg=dark ... */
   --atomic-bg-four: #0b2341;  /* ... */
   --atomic-fg-five: #0a6c6c; 
   --atomic-bg-five: #c2ffb2;
   --atomic-fg-six: #fdf1dd;
   --atomic-bg-six: #bf7518;   
   --atomic-lite-cream: #f7f5f0; /* soft cream for page backgrounds and light surfaces */
   --atomic-lite-moss: #e6e7e7; /* deep teal for primary brand elements and accents */
   --atomic-lite-teal: #dff0f0; /* light teal for backgrounds, highlights, and hover states */ 
   --atomic-lite-scifi: #d0e1f9; /* light sci-fi blue for backgrounds, highlights, and hover states */
   --atomic-bg-mid-olive: #cad7c1; /* mid olive for backgrounds and highlights */
   --atomic-bg-hi-practice: #fdf1dd; /* practice amber for light backgrounds, highlights, and hover states */
   --atomic-bg-mid-rose: #f2c9be;
   --atomic-bg-mid-tweed: #c8c3ae;
   --atomic-bg-mid-mustard: #d1ce97;
   --atomic-bg-hi-navy: #0b2341; /* rich navy for headers, footers, and strong text */
   --atomic-bg-hi-amber: #bf7518; /* warm amber for secondary accents and highlights */
   --atomic-bg-hi-gold: #cc9933; /* muted gold for warnings and emphasis on dark backgrounds */
   --atomic-bg-hi-mustard: #d1bf35; /* golden mustard for warnings and energetic highlights */
   --atomic-bg-hi-avocado: #85ad9d; /* rich avocado for info */
   --atomic-bg-hi-scifi: #3068a0; /* sci-fi blue for info states and futuristic accents */   
   --atomic-bg-hi-wizard: #074e4e; /* wizard teal for dark accents, hover states, and strong text */
   --atomic-bg-hi-scientist: #0d8585; /* scientist teal for primary accents, links, and interactive elements */
   --atomic-bg-hi-theory: #9a5e12; /* theory amber for warm accents, highlights, and secondary buttons */
   --atomic-terracotta: #b33928; /* earthy terracotta for error states and bold accents */
   --atomic-olive: #2a7a4a; /* muted olive for success states and natural highlights */
   --atomic-avocado: #85ad9d; /* rich avocado for info states and vibrant accents */
   --atomic-mustard: #d1bf35; /* golden mustard for warnings and energetic highlights */
   --atomic-scifi: #3068a0; /* sci-fi blue for info states and futuristic accents */
   --atomic-wizard: #074e4e; /* wizard teal for dark accents, hover states, and strong text */
   --atomic-professor: #dff0f0; /* professor teal for light backgrounds, highlights, and hover states */    
   --atomic-scientist: #0d8585; /* scientist teal for primary accents, links, and interactive elements */   
   --atomic-theory: #9a5e12; /* theory amber for warm accents, highlights, and secondary buttons */   
   --atomic-practice: #fdf1dd; /* practice amber for light backgrounds, highlights, and hover states */  
   --atomic-engenuity: #e2f3ea; /* ingenuity green for light success states, backgrounds, and highlights */ 
   --atomic-silver: #c8c3ae; /* silver for text, borders, and grounded elements */  
   --atomic-iron: #3a362e; /* iron for strong text, code, and console elements */   
   --atomic-spaceman: #1c1b17; /* spaceman black for console backgrounds and deep accents */ 
   --atomic-lunar: #f5f2ea; /* lunar off-white for code backgrounds and light surfaces */ 
   --atomic-rocketship: #1e3a5f; /* rocketship navy for header gradients and strong accents */  
   --atomic-apollo: #0b2341; /* apollo navy for headers, footers, and strong text */   
   --atomic-moonmission: #dff0f0; /* moon mission teal for light backgrounds, highlights, and hover states */  
   --atomic-whamo: #e86100; /* vivid whamo orange for high-energy accents and calls to action */   
   --atomic-spicy: #f6a06a; /* spicy orange for warnings and energetic highlights */
   --atomic-dijon: #d1ce97; /* spicy mustard for warnings and energetic highlights */   
   --atomic-mint: #e6e7e7; /* light minty gray for subtle backgrounds and borders */
   --atomic-teal: #0a6c6c; /* deep teal for primary brand elements and accents */
   --atomic-amber: #bf7518; /* warm amber for secondary accents and highlights */
   --atomic-navy: #0b2341; /* rich navy for headers, footers, and strong text */
   --atomic-cream: #f7f5f0; /* soft cream for page backgrounds and light surfaces */
   --atomic-gold: #cc9933; /* muted gold for warnings and emphasis on dark backgrounds */

    /* =================================================================
       brand
       ================================================================= */
    --brand-navy:        #0b2341;   /* AU navy — header, footer, deep bg          */
    --brand-orange:      #cc4e0b;   /* AU orange — CTA, active accent             */
    --brand-orange-bright: #e86100; /* AU vivid orange — nav accents, borders      */
    --brand-teal:        #0a6c6c;   /* demo teal — feature elements               */
    --brand-teal-lt:     #dff0f0;
    --brand-teal-dk:     #074e4e;
    --brand-teal-viv:    #0d8585;
    --brand-amber:       #bf7518;   /* demo amber — warm accents                  */
    --brand-amber-lt:    #fdf1dd;
    --brand-amber-dk:    #9a5e12;

    /* =================================================================
       colors.txt overrides (highest priority)
       ================================================================= */
    --em-cyan:           #3399CC;   /* electric cyan — links, heroes, dark-bg      */
    --em-cream:          #FFFFCC;   /* off-white — highlight text on dark bg       */
    --em-gold:           #CC9933;   /* gold — warning/highlight text on dark bg    */

    /* =================================================================
       text
       ================================================================= */
    --text-default:      #2a2622;
    --text-secondary:    #5c5650;
    --text-muted:        #8f877d;
    --text-inverse:      #faf8f4;
    --text-link:         #3399CC;   /* colors.txt cyan                            */
    --text-link-hover:   #0a6c6c;  /* teal on hover                              */

    /* =================================================================
       surfaces / backgrounds
       ================================================================= */
    --bg-page:           #f7f5f0;   /* ivory                                      */
    --bg-panel:          #ffffff;
    --bg-subtle:         #f0ede6;
    --bg-inset:          #eae6dd;
    --bg-header:         #0b2341;   /* AU navy                                    */
    --bg-header-grad:    linear-gradient(135deg, #0b2341 0%, #1e3a5f 100%);

    /* =================================================================
       borders
       ================================================================= */
    --border-default:    #ddd8ce;
    --border-light:      #e8e4db;
    --border-strong:     #c8c3ae;

    /* =================================================================
       semantic states
       ================================================================= */
    --color-success:     #2a7a4a;
    --color-success-lt:  #e2f3ea;
    --color-warning:     #bf7518;
    --color-warning-lt:  #fdf1dd;
    --color-danger:      #b33928;
    --color-danger-lt:   #fde8e4;
    --color-info:        #3068a0;
    --color-info-lt:     #e0ecf8;

    /* =================================================================
       code / console
       ================================================================= */
    --code-bg:           #f5f2ea;
    --code-text:         #3a362e;
    --console-bg:        #1c1b17;
    --console-text:      #c8c3ae;

    /* =================================================================
       typography
       ================================================================= */
    --font-body:         'Barlow', davis-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display:      'Space Grotesk', sweet-sans-pro, sans-serif;
    --font-mono:         'SF Mono', 'Fira Code', Consolas, monospace;

    /* =================================================================
       shape
       ================================================================= */
    --radius:            8px;
    --radius-sm:         4px;
    --radius-lg:         12px;
    --radius-pill:       9999px;
    --shadow-sm:         0 1px 3px rgba(42,38,34,0.07);
    --shadow-md:         0 4px 12px rgba(42,38,34,0.08);
    --shadow-lg:         0 8px 24px rgba(42,38,34,0.10);

    /* =================================================================
       focus
       ================================================================= */
    --focus-ring:        0 0 0 3px rgba(51,153,204,0.35);

    /* =================================================================
       list markers (colors.txt)
       ================================================================= */
    --list-bullet:       '‧ ';
    --list-inline-sep:   ' ‧ ';

    /* =================================================================
       legacy compatibility aliases
       (map old var names → new tokens so existing selectors keep working
        while we migrate file-by-file)
       ================================================================= */
    --primary:           var(--brand-teal);
    --primary-dark:      var(--brand-teal-dk);
    --success:           var(--color-success);
    --warning:           var(--color-warning);
    --error:             var(--color-danger);
    --danger:            var(--color-danger);
    --gray-50:           #f7f5f0;
    --gray-100:          var(--bg-subtle);
    --gray-200:          var(--border-default);
    --gray-300:          var(--border-strong);
    --gray-600:          var(--text-secondary);
    --gray-800:          var(--text-default);
    --gray-900:          var(--brand-navy);
    --bg:                var(--bg-panel);
    --bg-secondary:      var(--bg-page);
    --bg-tertiary:       var(--bg-subtle);
    --bg-hover:          var(--bg-subtle);
    --border:            var(--border-default);
    --accent:            var(--brand-teal);
    --accent-light:      var(--brand-teal-lt);
}