/**
 * C.Bio design tokens — https://cbiohealth.com
 *
 * Rebrand: edit the PALETTE values first, then spot-check hero, portal, footer, and shop.
 */

:root {
	/* ═══════════════════════════════════════════════════════
	   PALETTE — canonical C.Bio colors
	   ═══════════════════════════════════════════════════════ */

	/* Brand teal (header CTA, hero accent, links, portal buttons) */
	--celia-brand: #00B0A9;
	--celia-brand-hover: #009990;
	--celia-brand-active: #029f99;
	--celia-brand-deep: #053541;
	--celia-brand-light: rgba(0, 176, 169, 0.08);

	/* Ink / text neutrals */
	--celia-ink: #000000;
	--celia-ink-heading: #111111;
	--celia-ink-soft: #1A1A1A;
	--celia-ink-body: #959991;
	--celia-ink-muted: #6f6f6f;
	--celia-ink-faint: #B9B9B9;

	/* Portal & slate (login panel, glass fields, auth cards) */
	--celia-white: #ffffff;
	--celia-slate: #69809E;
	--celia-slate-medium: #5A6D85;
	--celia-slate-dark: #4A5D72;
	--celia-portal-surface: #9FA7B2;
	--celia-portal-panel: #A9B0BA;
	--celia-portal-accent: #A8C9D4;
	--celia-portal-muted: #8fa3ad;
	--celia-portal-dark: #4a5560;
	--celia-portal-dim: #8f98a3;

	/* Surfaces */
	--celia-surface-page: #ffffff;
	--celia-surface-footer: #F3F5F0;
	--celia-surface-cream: #FCFAF7;
	--celia-surface-warm: #F8F5EF;
	--celia-surface-neutral: #F6F6F6;
	--celia-surface-muted: #EEE6E2;
	--celia-surface-sage: #E8E7D9;

	/* Shop / cart (commerce CTAs — brand teal) */
	--celia-shop: #00B0A9;
	--celia-shop-hover: #009990;

	/* Gradients */
	--celia-gradient-hero-title: linear-gradient(271.46deg, var(--celia-ink-soft) 0.1%, var(--celia-brand) 95.69%);

	/* ═══════════════════════════════════════════════════════
	   TEXT — semantic aliases
	   ═══════════════════════════════════════════════════════ */

	--celia-text-primary: var(--celia-ink);
	--celia-text-secondary: var(--celia-ink-muted);
	--celia-text-muted: var(--celia-ink-faint);
	--celia-text-inverse: var(--celia-white);
	--celia-text-heading: var(--celia-ink-heading);
	--celia-text-body: var(--celia-ink-body);

	--celia-text-brand: var(--celia-brand);
	--celia-text-accent-green: #49c472;

	--celia-text-green: var(--celia-shop);
	--celia-text-green-deep: #2f5f33;

	--celia-text-slate: var(--celia-slate);
	--celia-text-slate-medium: var(--celia-slate-medium);
	--celia-text-slate-dark: var(--celia-slate-dark);
	--celia-text-link: var(--celia-slate);

	--celia-text-neutral: var(--celia-ink-body);
	--celia-text-charcoal: #333333;
	--celia-text-charcoal-light: #373737;
	--celia-text-dark-soft: var(--celia-ink-soft);
	--celia-text-gray: #666666;
	--celia-text-gray-medium: #424242;

	--celia-text-error: #ffb4b4;
	--celia-text-error-dark: #d63638;
	--celia-text-error-deep: #880808;
	--celia-text-error-wp: #b81c23;
	--celia-text-error-wp-dark: #8f1f2d;
	--celia-text-warning: #A6470B;
	--celia-text-warning-dark: #5c4a18;
	--celia-text-form-hint: #5f6b7a;
	--celia-text-purple: #8D6FA0;
	--celia-text-danger-muted: #721c24;

	/* Text alpha — dark on light */
	--celia-text-alpha-20: rgba(0, 0, 0, 0.2);
	--celia-text-alpha-25: rgba(0, 0, 0, 0.25);
	--celia-text-alpha-35: rgba(0, 0, 0, 0.35);
	--celia-text-alpha-40: rgba(0, 0, 0, 0.4);
	--celia-text-alpha-55: rgba(0, 0, 0, 0.55);
	--celia-text-alpha-65: rgba(0, 0, 0, 0.65);
	--celia-text-alpha-70: rgba(0, 0, 0, 0.7);
	--celia-text-alpha-75: rgba(0, 0, 0, 0.75);
	--celia-text-alpha-80: rgba(0, 0, 0, 0.8);

	/* Text alpha — light on dark (portal) */
	--celia-text-inverse-alpha-35: rgba(255, 255, 255, 0.35);
	--celia-text-inverse-alpha-50: rgba(255, 255, 255, 0.5);
	--celia-text-inverse-alpha-65: rgba(255, 255, 255, 0.65);
	--celia-text-inverse-alpha-75: rgba(255, 255, 255, 0.75);
	--celia-text-inverse-alpha-85: rgba(255, 255, 255, 0.85);
	--celia-text-inverse-alpha-88: rgba(255, 255, 255, 0.88);
	--celia-text-inverse-alpha-90: rgba(255, 255, 255, 0.9);
	--celia-text-inverse-alpha-92: rgba(255, 255, 255, 0.92);

	/* ═══════════════════════════════════════════════════════
	   BACKGROUNDS
	   ═══════════════════════════════════════════════════════ */

	--celia-bg-page: var(--celia-surface-page);
	--celia-bg-page-alt: #fffdf9;
	--celia-bg-cream: var(--celia-surface-cream);
	--celia-bg-warm: var(--celia-surface-warm);
	--celia-bg-neutral: var(--celia-surface-neutral);
	--celia-bg-light: #F4F4F4;
	--celia-bg-muted: var(--celia-surface-muted);
	--celia-bg-sage: var(--celia-surface-sage);
	--celia-bg-gray: #D9D9D9;
	--celia-bg-gray-light: #DDDDDD;
	--celia-bg-gray-pale: #f8f8f8;
	--celia-bg-gray-soft: #f5f5f5;
	--celia-bg-footer: var(--celia-surface-footer);
	--celia-bg-pure: #FEFEFE;

	--celia-bg-brand: var(--celia-brand);
	--celia-bg-brand-hover: var(--celia-brand-hover);
	--celia-bg-brand-active: var(--celia-brand-active);
	--celia-bg-brand-light: var(--celia-brand-light);
	--celia-bg-green: var(--celia-brand);
	--celia-bg-green-dark: var(--celia-brand-hover);
	--celia-bg-teal-dark: var(--celia-brand-deep);
	--celia-bg-slate: var(--celia-portal-accent);
	--celia-bg-slate-muted: var(--celia-portal-surface);
	--celia-bg-slate-soft: var(--celia-portal-muted);
	--celia-bg-slate-accent: #A2BEBF;
	--celia-bg-auth: var(--celia-portal-panel);
	--celia-bg-auth-dark: var(--celia-portal-dark);
	--celia-bg-auth-muted: var(--celia-portal-dim);
	--celia-bg-header-overlay: rgba(40, 82, 81, 0.35);

	--celia-bg-peach: #FFE8DC;
	--celia-bg-beige: #D3CaB8;
	--celia-bg-beige-dark: #dbcac2;
	--celia-bg-beige-muted: #D8D0C3;
	--celia-bg-warm-tint: #eee8e2;

	--celia-bg-dark-soft: var(--celia-ink-heading);

	--celia-bg-success-light: #f3faf3;
	--celia-bg-success: #e8f4e9;
	--celia-bg-error-light: #fff3f3;
	--celia-bg-error: #fbecef;
	--celia-bg-warning-light: #f5ecd5;

	--celia-bg-alpha-05: rgba(0, 0, 0, 0.05);
	--celia-bg-alpha-08: rgba(0, 0, 0, 0.08);
	--celia-bg-alpha-10: rgba(0, 0, 0, 0.1);
	--celia-bg-alpha-18: rgba(0, 0, 0, 0.18);
	--celia-bg-alpha-20: rgba(0, 0, 0, 0.2);
	--celia-bg-alpha-25: rgba(0, 0, 0, 0.25);
	--celia-bg-alpha-30: rgba(0, 0, 0, 0.3);

	--celia-bg-inverse-alpha-04: rgba(255, 255, 255, 0.04);
	--celia-bg-inverse-alpha-08: rgba(255, 255, 255, 0.08);
	--celia-bg-inverse-alpha-10: rgba(255, 255, 255, 0.1);
	--celia-bg-inverse-alpha-12: rgba(255, 255, 255, 0.12);
	--celia-bg-inverse-alpha-15: rgba(255, 255, 255, 0.15);
	--celia-bg-inverse-alpha-16: rgba(255, 255, 255, 0.16);
	--celia-bg-inverse-alpha-20: rgba(255, 255, 255, 0.2);
	--celia-bg-inverse-alpha-22: rgba(255, 255, 255, 0.22);
	--celia-bg-inverse-alpha-28: rgba(255, 255, 255, 0.28);
	--celia-bg-inverse-alpha-35: rgba(255, 255, 255, 0.35);
	--celia-bg-inverse-alpha-65: rgba(255, 255, 255, 0.65);
	--celia-bg-inverse-alpha-80: rgba(255, 255, 255, 0.8);
	--celia-bg-inverse-alpha-85: rgba(255, 255, 255, 0.85);
	--celia-bg-inverse-alpha-90: rgba(255, 255, 255, 0.9);

	/* ═══════════════════════════════════════════════════════
	   BORDERS
	   ═══════════════════════════════════════════════════════ */

	--celia-border-primary: var(--celia-ink);
	--celia-border-heading: var(--celia-ink-heading);
	--celia-border-charcoal: var(--celia-text-charcoal);
	--celia-border-brand: var(--celia-brand);
	--celia-border-brand-alpha: rgba(0, 176, 169, 0.5);
	--celia-border-inverse: var(--celia-white);
	--celia-border-error: #d63638;
	--celia-border-error-wp: #b81c23;
	--celia-border-accent: #9C6D64;
	--celia-border-gray: #d8d8d8;
	--celia-border-form: #c8d0da;
	--celia-border-error-bright: #ff8a8a;

	--celia-border-warm: #e6e2dd;
	--celia-border-warm-alt: #e9e4dd;
	--celia-border-warm-muted: #eee8e2;
	--celia-border-warm-dark: #d8d0c6;
	--celia-border-warm-dashed: #e2dacf;

	--celia-border-warning: #e6d2a3;
	--celia-border-error-soft: #e6b9c1;
	--celia-border-error-pale: #e0b4b4;
	--celia-border-success: #dfe8de;

	--celia-border-alpha-12: rgba(0, 0, 0, 0.12);
	--celia-border-alpha-15: rgba(0, 0, 0, 0.15);
	--celia-border-alpha-16: rgba(0, 0, 0, 0.16);
	--celia-border-alpha-18: rgba(25, 23, 17, 0.48);
	--celia-border-alpha-25: rgba(0, 0, 0, 0.25);
	--celia-border-alpha-30: rgba(0, 0, 0, 0.3);
	--celia-border-alpha-50: rgba(0, 0, 0, 0.5);
	--celia-border-alpha-80: rgba(0, 0, 0, 0.8);

	--celia-border-inverse-alpha-18: rgba(255, 255, 255, 0.18);
	--celia-border-inverse-alpha-28: rgba(255, 255, 255, 0.28);
	--celia-border-inverse-alpha-30: rgba(255, 255, 255, 0.3);
	--celia-border-inverse-alpha-35: rgba(255, 255, 255, 0.35);
	--celia-border-inverse-alpha-40: rgba(255, 255, 255, 0.4);
	--celia-border-inverse-alpha-75: rgba(255, 255, 255, 0.75);
	--celia-border-inverse-alpha-80: rgba(255, 255, 255, 0.8);
	--celia-border-error-alpha: rgba(255, 170, 170, 0.55);
	--celia-border-info-alpha: rgba(170, 230, 225, 0.55);
	--celia-border-slate-alpha: rgba(151, 181, 183, 0.5);

	--celia-border-default: 1px solid var(--celia-border-alpha-15);
	--celia-border-light: 1px solid var(--celia-bg-alpha-10);
	--celia-border-medium: 1px solid var(--celia-text-alpha-20);
	--celia-border-heading-solid: 1px solid var(--celia-border-heading);
	--celia-border-brand-solid: 1px solid var(--celia-border-brand);
	--celia-border-inverse-solid: 1px solid var(--celia-border-inverse);
	--celia-border-inverse-field: 1px solid var(--celia-border-inverse);
	--celia-border-warm-solid: 1px solid var(--celia-border-warm);
	--celia-border-warm-alt-solid: 1px solid var(--celia-border-warm-alt);
	--celia-border-warm-muted-solid: 1px solid var(--celia-border-warm-muted);
	--celia-border-warm-dark-solid: 1px solid var(--celia-border-warm-dark);
	--celia-border-charcoal-solid: 1px solid var(--celia-border-charcoal);
	--celia-border-gray-solid: 2px solid var(--celia-border-gray);
	--celia-border-default-2px: 2px solid var(--celia-border-alpha-15);
	--celia-border-dashed-warm: 1px dashed var(--celia-border-warm-dashed);

	/* Portal glass fields (homepage + my-account) */
	--celia-portal-field-height: 35px;
	--celia-portal-field-padding: 10px;
	--celia-portal-field-radius: 20px;
	--celia-portal-field-border: var(--celia-border-inverse-field);
	--celia-portal-field-bg: var(--celia-bg-inverse-alpha-08);
	--celia-portal-field-bg-hover: var(--celia-bg-inverse-alpha-12);
	--celia-portal-field-blur: blur(98px);

	/* ═══════════════════════════════════════════════════════
	   TYPOGRAPHY — font families (C.Bio / TASA Orbiter)
	   Change stacks here; update @font-face paths in celia-fonts.css if files change.
	   ═══════════════════════════════════════════════════════ */

	--celia-font-name-regular: 'TASA Orbiter Regular';
	--celia-font-name-medium: 'TASA Orbiter Medium';
	--celia-font-name-bold: 'TASA Orbiter Bold';
	--celia-font-name-extrabold: 'TASA Orbiter ExtraBold';
	--celia-font-name-variable: 'TASA Orbiter';

	--celia-font-body: var(--celia-font-name-regular), sans-serif;
	--celia-font-ui: var(--celia-font-name-medium), sans-serif;
	--celia-font-display: var(--celia-font-name-bold), sans-serif;
	--celia-font-body-stack: var(--celia-font-name-regular), var(--celia-font-name-variable), sans-serif;
	--celia-font-display-stack: var(--celia-font-name-bold), var(--celia-font-name-variable), sans-serif;
	--celia-font-display-heavy-stack: var(--celia-font-name-extrabold), var(--celia-font-name-variable), sans-serif;
	--celia-font-mono: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

body {
	color: var(--celia-text-primary);
	background-color: var(--celia-bg-page);
	font-family: var(--celia-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--celia-text-heading);
}

p {
	color: var(--celia-text-secondary);
}

.home-hero__body {
	color: var(--celia-text-body);
}