/* ========================================================================== AVEBASE DESIGN SYSTEM — TOKENS Sursa: Avebase Brand Guidelines (avebase_brand/). Tema default: LIGHT. Dark mode: [data-theme="dark"] pe redefinește DOAR tokenii semantici — componentele nu se ating. ========================================================================== */ /* -------------------------------------------------------------------------- Fonturi - Mozilla Headline (titluri) — încărcat din Google Fonts în . - Mozilla Text (body/UI) — self-hosted, variable font 200–700. NOTĂ: brandbook-ul cere Basic Sans pentru body, dar OTF-urile din kit sunt subsetate la ASCII (fără diacritice RO) — font protejat Adobe. Când există licența completă, se adaugă @font-face "Basic Sans" aici și se schimbă --font-body mai jos. Atât. -------------------------------------------------------------------------- */ @font-face { font-family: 'Mozilla Text'; src: url('../fonts/mozillatext-var.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; } :root { /* ----- Paleta brand (valori fixe, nu se folosesc direct în componente) */ --color-emerald: #74ca8f; --color-emerald-soft: #9bdab0; /* clapele de cutie din ads */ --color-emerald-light: #e8f6ed; /* fundaluri subtile de secțiune */ --color-emerald-dark: #4fae6e; /* hover/borduri pe emerald */ --color-emerald-deep: #2e7d4c; /* text "verde" accesibil pe alb */ --color-navy: #003976; --color-navy-bright: #0a5cb0; /* link hover, accente interactive */ --color-navy-light: #e9f0f8; /* fundal info subtil */ --color-onyx: #0d0d0d; --color-amber: #e98a15; /* EXCLUSIV butoane & CTA */ --color-amber-dark: #d97d0e; /* hover CTA (varianta A: fundal mai închis, text alb) */ --color-white: #ffffff; /* ----- Grays neutre (ton ușor verzui, derivate din emerald) */ --gray-50: #f6f9f7; --gray-100: #eef2ef; --gray-200: #dfe6e1; --gray-300: #c6d0c9; --gray-400: #9daaa1; --gray-500: #6e7a72; --gray-600: #4c554f; --gray-700: #333a36; --gray-800: #1e2320; --gray-900: #141715; /* ----- Status (amber e rezervat CTA — warning are propriul galben-pământiu) */ --color-success: #2e9e57; --color-success-bg: #e8f6ed; --color-danger: #d23f3f; --color-danger-bg: #fbeaea; --color-warning: #e98a15; --color-warning-bg: #fdf3e0; --color-info: #0a5cb0; --color-info-bg: #e9f0f8; /* ----- Tipografie */ --font-heading: 'Mozilla Headline', 'Mozilla Text', system-ui, sans-serif; --font-body: 'Mozilla Text', system-ui, -apple-system, 'Segoe UI', sans-serif; /* slot Basic Sans */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-base: 1.55; /* ----- Colțuri rotunjite (generoase — limbaj de brand) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* ----- Spațiere */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ----- Umbre (moi, discrete — contrastul vine din culoare, nu din umbre) */ --shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.06); --shadow-md: 0 4px 12px rgba(13, 13, 13, 0.08); --shadow-lg: 0 12px 32px rgba(13, 13, 13, 0.12); /* ----- Tranziții */ --transition-fast: 120ms ease; --transition-base: 200ms ease; /* ----- Layout */ --container-max: 1320px; --header-height: 72px; --sidebar-width: 264px; /* ====================================================================== TOKENI SEMANTICI — LIGHT (default) Componentele folosesc DOAR ce e de aici în jos. ====================================================================== */ --bg-body: #fcfdfc; --bg-surface: var(--color-white); /* carduri, modale, tabele */ --bg-subtle: var(--gray-50); /* zone secundare, thead */ --bg-section: var(--color-emerald-light); /* secțiuni de accent */ --bg-section-bold: var(--color-emerald); /* secțiuni pline de brand */ --bg-inverse: var(--color-onyx); /* benzi dark (footer) */ --text-primary: var(--color-onyx); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --text-heading: var(--color-navy); --text-on-emerald: var(--color-onyx); --text-on-inverse: var(--color-white); --link: var(--color-navy); --link-hover: var(--color-navy-bright); --border: var(--gray-200); --border-strong: var(--gray-300); --focus-ring: rgba(116, 202, 143, 0.45); /* CTA (amber, exclusiv) */ --cta-bg: var(--color-amber); --cta-bg-hover: var(--color-amber-dark); --cta-text: var(--color-white); --cta-outline: var(--color-onyx); /* conturul "cutie 3D" */ /* Butoane secundare */ --btn2-bg: var(--color-navy); --btn2-bg-hover: var(--color-navy-bright); --btn2-text: var(--color-white); /* Form controls */ --input-bg: var(--color-white); --input-border: var(--gray-300); --input-text: var(--color-onyx); --input-placeholder:var(--gray-400); color-scheme: light; } /* ========================================================================== DARK THEME — construit de pe acum, activabil ulterior cu . Redefinește doar tokenii semantici. ========================================================================== */ [data-theme="dark"] { --bg-body: #111412; --bg-surface: #191d1b; --bg-subtle: #1f2421; --bg-section: #16251c; --bg-section-bold: #1d3a29; --bg-inverse: #0d0d0d; --text-primary: #eef2ef; --text-secondary: #b9c2bc; --text-muted: #8d978f; --text-heading: #9fc3ec; /* navy nu are contrast pe dark */ --text-on-emerald: var(--color-onyx); --text-on-inverse: var(--color-white); --link: #8fb8e8; --link-hover: #b3d0f2; --border: #2c332f; --border-strong: #3d453f; --focus-ring: rgba(116, 202, 143, 0.35); --cta-outline: var(--color-white); --input-bg: #1f2421; --input-border: #3d453f; --input-text: #eef2ef; --input-placeholder:#6e7a72; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; }