/*
* ============================================================
* DESIGN TOKENS — UNA4CAREER Projects & Results Showcase
* ============================================================
* Extracted from https://www.una4career.eu (Divi-based WordPress theme)
* Source inspection: computed cookie-banner config, HTML structure, class names
* Last updated: 2026-07-16
*
* Usage: import this file BEFORE styles.css in every HTML page:
*
*
* ============================================================
*/
/* ── Google Fonts ── */
/* Montserrat matches the geometric, single-story 'a' and 'g' shown in the new reference image */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
:root {
/* ── COLOUR PALETTE ─────────────────────────────────────── */
/* Primary — institutional teal-blue extracted from una4career.eu */
--color-primary: #00437E; /* main CTA, links, accents */
--color-primary-dark: #003366; /* hover, pressed, darker variant */
--color-primary-darker: #002244; /* very dark, active nav items */
--color-primary-light: #005B9E; /* lighter accent, focus rings */
--color-primary-faint: #E6F0F9; /* pale tinted backgrounds */
/* Secondary — complementary warm gold (Una Europa alliance accent) */
--color-secondary: #DABE27; /* badges, call labels, highlights */
--color-secondary-dark: #B8A01A; /* hover on secondary elements */
--color-secondary-light: #FDFBF2; /* pale secondary background */
/* Neutrals */
--color-text: #2b2b2b; /* body text, headings */
--color-text-muted: #7c7c7c; /* secondary / metadata text */
--color-text-light: #a0a0a0; /* placeholder, disabled */
--color-text-inverted: #ffffff; /* text on dark backgrounds */
/* Backgrounds */
--color-bg: #ffffff; /* page background */
--color-bg-subtle: #f9f9f9; /* card hover, accordion active */
--color-bg-light: #f4f4f4; /* section backgrounds, header bg */
--color-bg-dark: #1a2a35; /* footer, dark sections */
--color-bg-darker: #0f1d26; /* very dark footer areas */
/* Borders */
--color-border: #efefef; /* card borders, dividers */
--color-border-medium: #d2d2d2; /* input borders */
--color-border-focus: #15779b; /* focus ring colour */
/* Semantic */
--color-success: #27ae60;
--color-warning: #f39c12;
--color-error: #e74c3c;
--color-info: #3498db;
/* Call badges */
--color-call-1: #15779b; /* 1st Call badge */
--color-call-2: #6c4fa3; /* 2nd Call badge (purple accent) */
/* Knowledge area badges */
--color-area-exp: #e67e22; /* Experimental Sciences */
--color-area-life: #27ae60; /* Life Sciences */
--color-area-soc: #2980b9; /* Social Sciences */
--color-area-hum: #8e44ad; /* Humanities */
/* ── TYPOGRAPHY ─────────────────────────────────────────── */
/* Font families */
--font-family-body: 'Montserrat', 'Open Sans', Arial, Helvetica, sans-serif;
--font-family-heading: 'Montserrat', 'Open Sans', Arial, Helvetica, sans-serif;
--font-family-mono: 'Courier New', Courier, monospace;
/* Font sizes — modular scale (base 16px) */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.0625rem; /* 17px — Divi body default */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
/* Font weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Line heights */
--line-height-tight: 1.3;
--line-height-base: 1.6;
--line-height-relaxed: 1.8;
/* Letter spacing */
--letter-spacing-tight: -0.02em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.05em;
--letter-spacing-wider: 0.1em;
/* ── SPACING ─────────────────────────────────────────────── */
/* 4-point grid */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ── LAYOUT ──────────────────────────────────────────────── */
--container-max: 1280px;
--container-narrow: 900px;
--container-padding-x: var(--space-6); /* 24px */
/* Header */
--header-height: 72px;
--header-bg: var(--color-bg);
--header-border: var(--color-border);
/* Footer */
--footer-bg: var(--color-bg-dark);
--footer-text: #b0c4cc;
--footer-link: #c8dde4;
--footer-link-hover: var(--color-primary-light);
/* ── BORDERS & RADIUS ────────────────────────────────────── */
--radius-sm: 3px; /* cookie banner dialog (Divi source) */
--radius-md: 5px; /* cards, buttons, badges */
--radius-lg: 8px; /* modals, large cards */
--radius-xl: 12px; /* hero sections */
--radius-full: 9999px; /* pills, chips */
--border-width: 1px;
--border-style: solid;
--border-color: var(--color-border);
/* ── SHADOWS ─────────────────────────────────────────────── */
/* Extracted from cookie banner boxShadow config: 0 5px 13px rgba(0,0,0,0.20) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.10);
--shadow-md: 0 5px 13px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
--shadow-focus: 0 0 0 3px rgba(21, 119, 155, 0.25); /* primary-based focus ring */
/* ── TRANSITIONS ─────────────────────────────────────────── */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
--transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Z-INDEX SCALE ───────────────────────────────────────── */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;
/* ── COMPONENT-SPECIFIC TOKENS ───────────────────────────── */
/* Buttons */
--btn-padding-y: 0.625rem; /* 10px */
--btn-padding-x: 1.25rem; /* 20px */
--btn-font-size: var(--font-size-base);
--btn-font-weight: var(--font-weight-semibold);
--btn-radius: var(--radius-md);
--btn-transition: var(--transition-base);
--btn-primary-bg: var(--color-primary);
--btn-primary-text: var(--color-text-inverted);
--btn-primary-hover-bg: var(--color-primary-dark);
--btn-secondary-bg: var(--color-bg-light);
--btn-secondary-text: var(--color-text);
--btn-secondary-border: var(--color-border-medium);
--btn-secondary-hover-bg: #e8e8e8;
/* Cards */
--card-bg: var(--color-bg);
--card-border: var(--color-border);
--card-radius: var(--radius-md);
--card-shadow: var(--shadow-card);
--card-shadow-hover: var(--shadow-md);
--card-padding: var(--space-6);
--card-transition: var(--transition-base);
/* Inputs / Form controls */
--input-bg: var(--color-bg);
--input-border: var(--color-border-medium);
--input-border-focus: var(--color-primary);
--input-radius: var(--radius-md);
--input-padding-y: 0.5rem;
--input-padding-x: 0.875rem;
--input-font-size: var(--font-size-base);
--input-shadow-focus: var(--shadow-focus);
/* Badges */
--badge-padding-y: 0.2rem;
--badge-padding-x: 0.6rem;
--badge-radius: 4px;
--badge-font-size: var(--font-size-xs);
--badge-font-weight: var(--font-weight-semibold);
--badge-letter-spacing: var(--letter-spacing-wide);
/* Tables */
--table-border: var(--color-border);
--table-header-bg: var(--color-bg-light);
--table-header-text: var(--color-text);
--table-row-hover: var(--color-primary-faint);
--table-stripe: var(--color-bg-subtle);
/* Pagination */
--pagination-btn-size: 2.25rem;
--pagination-active-bg: var(--color-primary);
--pagination-active-text: var(--color-text-inverted);
--pagination-radius: var(--radius-md);
/* Navigation */
--nav-link-color: var(--color-text);
--nav-link-hover: var(--color-primary);
--nav-link-active: var(--color-primary);
--nav-font-size: var(--font-size-base);
--nav-font-weight: var(--font-weight-semibold);
/* Section headings */
--section-title-color: var(--color-primary);
--section-title-size: var(--font-size-xl);
--section-title-weight: var(--font-weight-bold);
--section-border-color: var(--color-primary);
/* Dissemination chart bars */
--chart-bar-bg: var(--color-primary);
--chart-bar-bg-alt: var(--color-primary-light);
--chart-track-bg: var(--color-bg-light);
--chart-bar-radius: var(--radius-sm);
/* Reach indicators */
--reach-chip-bg: var(--color-primary-faint);
--reach-chip-text: var(--color-primary-dark);
--reach-chip-radius: var(--radius-md);
/* Toggle (cards / table view) */
--toggle-active-bg: var(--color-primary);
--toggle-active-text: var(--color-text-inverted);
--toggle-inactive-bg: var(--color-bg-light);
--toggle-inactive-text: var(--color-text-muted);
--toggle-radius: var(--radius-md);
}