/* ==========================================================================
   Phoenix BioLabs — Design Tokens
   Single source of truth for all brand values.
   All CSS uses these variables — never hard-code colors or sizes.
   ========================================================================== */

:root {
    /* ---- Brand Colors ---- */
    --ph-primary:          #C5A059;
    --ph-primary-10:       rgba(197, 160, 89, 0.1);
    --ph-primary-20:       rgba(197, 160, 89, 0.2);
    --ph-primary-hover:    #b38728;

    /* ---- Background ---- */
    --ph-bg-light:         #FFFFFF;
    --ph-bg-dark:          #0A0A0A;
    --ph-charcoal:         #1A1A1A;
    --ph-hero-bg-light:    #F9F9F9;
    --ph-hero-bg-dark:     #050505;
    --ph-footer-bg:        #000000;
    --ph-footer-bg-dark:   #050505;

    /* ---- Zinc Scale (replaces Tailwind zinc-*) ---- */
    --ph-zinc-50:          #fafafa;
    --ph-zinc-100:         #f4f4f5;
    --ph-zinc-200:         #e4e4e7;
    --ph-zinc-300:         #d4d4d8;
    --ph-zinc-400:         #a1a1aa;
    --ph-zinc-500:         #71717a;
    --ph-zinc-600:         #52525b;
    --ph-zinc-700:         #3f3f46;
    --ph-zinc-800:         #27272a;
    --ph-zinc-900:         #18181b;
    --ph-zinc-950:         #09090b;

    /* ---- Gold Gradients ---- */
    --ph-gold-gradient:     linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    --ph-gold-gradient-135: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

    /* ---- Dark Metallic Orb ---- */
    --ph-dark-gradient:     radial-gradient(circle at 30% 30%, #444444 0%, #333333 40%, #1a1a1a 100%);

    /* ---- Typography ---- */
    --ph-font-display: 'Cinzel', serif;
    --ph-font-serif:   'Playfair Display', serif;
    --ph-font-sans:    'Inter', sans-serif;

    /* ---- Layout ---- */
    --ph-max-width:     1280px;
    --ph-gutter:        1.5rem;       /* px-6 */
    --ph-section-py:    6rem;         /* py-24 */
    --ph-section-py-lg: 8rem;         /* py-32 */
    --ph-card-p:        1.5rem;       /* p-6 */

    /* ---- Borders ---- */
    --ph-radius:        0px;          /* sharp corners — brand requirement */
    --ph-border:        var(--ph-zinc-100);
    --ph-border-dark:   var(--ph-zinc-900);

    /* ---- Shadows ---- */
    --ph-luxury-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --ph-shadow-xl:     0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --ph-shadow-2xl:    0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --ph-shadow-gold:   0 4px 20px rgba(197, 160, 89, 0.25);

    /* ---- Transitions ---- */
    --ph-trans-fast:    0.15s ease;
    --ph-trans-base:    0.3s ease;
    --ph-trans-slow:    0.5s ease;
    --ph-trans-image:   0.7s ease;

    /* ---- Contextual Semantic Tokens (light mode defaults) ---- */
    --ph-bg:            var(--ph-bg-light);
    --ph-text:          #000000;
    --ph-text-muted:    var(--ph-zinc-500);
    --ph-text-subtle:   var(--ph-zinc-400);
    --ph-surface:       var(--ph-zinc-50);
    --ph-surface-alt:   var(--ph-zinc-100);
    --ph-card-bg:       rgba(250, 250, 250, 0.5);
    --ph-nav-bg:        rgba(255, 255, 255, 0.8);
    --ph-nav-border:    var(--ph-zinc-100);
    --ph-input-bg:      #FFFFFF;
    --ph-input-border:  var(--ph-zinc-200);
}

/* ---- Dark Mode Semantic Token Overrides ---- */
html.dark {
    --ph-bg:            var(--ph-bg-dark);
    --ph-text:          #FFFFFF;
    --ph-text-muted:    var(--ph-zinc-400);
    --ph-text-subtle:   var(--ph-zinc-500);
    --ph-surface:       var(--ph-zinc-950);
    --ph-surface-alt:   var(--ph-zinc-900);
    --ph-card-bg:       rgba(9, 9, 11, 0.5);
    --ph-nav-bg:        rgba(0, 0, 0, 0.8);
    --ph-nav-border:    var(--ph-zinc-900);
    --ph-border:        var(--ph-zinc-900);
    --ph-input-bg:      var(--ph-charcoal);
    --ph-input-border:  var(--ph-zinc-800);
}