/**
* Hello Rodolfo — Design System Foundation
* v1.0.0 — 2026-06-02
*
* Foundation file: @font-face, CSS variables (design tokens),
* minimal reset, typography base, base utilities.
*
* Scope: Admin Hello Rodolfo (WordPress wp-admin pages).
* Non per il menu QR cliente finale (quello ha skin separata).
*
* Cascade order: design-system.css → components.css → wp-overrides.css
*/

/* ============================================================
1. FONT FACES — New Atlas (self-hosted)
============================================================ */

@font-face {
font-family: 'New Atlas';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-Regular.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-Regular.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 400;
font-style: italic;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-RegularItalic.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-RegularItalic.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-Medium.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-Medium.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 500;
font-style: italic;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-MediumItalic.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-MediumItalic.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 600;
font-style: normal;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-SemiBold.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-SemiBold.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 600;
font-style: italic;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-SemiBoldItalic.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-SemiBoldItalic.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-Bold.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-Bold.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 700;
font-style: italic;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-BoldItalic.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-BoldItalic.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 900;
font-style: normal;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-Black.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-Black.woff') format('woff');
}

@font-face {
font-family: 'New Atlas';
font-weight: 900;
font-style: italic;
font-display: swap;
src: url('../../fonts/new-atlas/NewAtlas-BlackItalic.woff2') format('woff2'),
     url('../../fonts/new-atlas/NewAtlas-BlackItalic.woff') format('woff');
}

/* ============================================================
2. DESIGN TOKENS — CSS Variables
============================================================ */

:root {
/* ---------- Colors: Neutrals ---------- */
--hr-bg:                 #FFFFFF;
--hr-surface:            #F7F8F5;
--hr-surface-alt:        #EEF1EB;
--hr-border:             #DDE2D8;
--hr-border-strong:      #B8C2AE;
--hr-text-primary:       #1F3329;
--hr-text-secondary:     #4A5D52;
--hr-text-muted:         #7A8A80;
--hr-text-on-primary:    #FFFFFF;

/* ---------- Colors: Brand (verde Hello Rodolfo) ---------- */
--hr-primary:            #00584F;
--hr-primary-hover:      #004A43;
--hr-primary-active:     #003B36;
--hr-primary-soft:       #E0F1EE;

/* ---------- Colors: Semantic ---------- */
--hr-success:            #29B354;
--hr-success-soft:       #E7F8EC;
--hr-warning:            #C77D2C;
--hr-warning-soft:       #FBEDE5;
--hr-error:              #B84545;
--hr-error-soft:         #F8E1E1;
--hr-info:               #4A6B8A;
--hr-info-soft:          #E0E7EE;

/* ---------- Typography: Family ---------- */
--hr-font-sans:    'New Atlas', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--hr-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

/* ---------- Typography: Size scale (rem-based, base 16px) ---------- */
--hr-text-xs:      0.75rem;   /* 12px — captions, hints */
--hr-text-sm:      0.875rem;  /* 14px — UI default, dense tables */
--hr-text-base:    1rem;      /* 16px — body */
--hr-text-lg:      1.125rem;  /* 18px — emphasized body */
--hr-text-xl:      1.25rem;   /* 20px — h4 / section title */
--hr-text-2xl:     1.5rem;    /* 24px — h3 */
--hr-text-3xl:     1.875rem;  /* 30px — h2 */
--hr-text-4xl:     2.25rem;   /* 36px — h1 page title */
--hr-text-5xl:     3rem;      /* 48px — display / hero admin */

/* ---------- Typography: Line heights ---------- */
--hr-leading-tight:    1.2;
--hr-leading-snug:     1.35;
--hr-leading-normal:   1.5;
--hr-leading-relaxed:  1.65;

/* ---------- Typography: Weights ---------- */
--hr-weight-regular:   400;
--hr-weight-medium:    500;
--hr-weight-semibold:  600;
--hr-weight-bold:      700;
--hr-weight-black:     900;

/* ---------- Typography: Letter spacing ---------- */
--hr-tracking-tight:   -0.01em;
--hr-tracking-normal:   0;
--hr-tracking-wide:     0.02em;
--hr-tracking-caps:     0.06em;

/* ---------- Spacing scale (4-based) ---------- */
--hr-space-0:    0;
--hr-space-1:    0.25rem;   /* 4px */
--hr-space-2:    0.5rem;    /* 8px */
--hr-space-3:    0.75rem;   /* 12px */
--hr-space-4:    1rem;      /* 16px */
--hr-space-5:    1.5rem;    /* 24px */
--hr-space-6:    2rem;      /* 32px */
--hr-space-8:    3rem;      /* 48px */
--hr-space-10:   4rem;      /* 64px */
--hr-space-12:   6rem;      /* 96px */

/* ---------- Border radius ---------- */
--hr-radius-sm:    4px;
--hr-radius-md:    8px;
--hr-radius-lg:    12px;
--hr-radius-xl:    16px;
--hr-radius-full:  9999px;

/* ---------- Border widths ---------- */
--hr-border-1:   1px;
--hr-border-2:   2px;

/* ---------- Shadows (low opacity, sober) ---------- */
--hr-shadow-xs:    0 1px 2px rgba(31, 51, 41, 0.04);
--hr-shadow-sm:    0 2px 4px rgba(31, 51, 41, 0.06), 0 1px 2px rgba(31, 51, 41, 0.04);
--hr-shadow-md:    0 4px 8px rgba(31, 51, 41, 0.08), 0 2px 4px rgba(31, 51, 41, 0.04);
--hr-shadow-lg:    0 12px 24px rgba(31, 51, 41, 0.10), 0 4px 8px rgba(31, 51, 41, 0.06);
--hr-shadow-xl:    0 24px 48px rgba(31, 51, 41, 0.14), 0 8px 16px rgba(31, 51, 41, 0.06);
--hr-shadow-focus: 0 0 0 3px rgba(0, 88, 79, 0.20);

/* ---------- Z-index scale ---------- */
--hr-z-base:       1;
--hr-z-dropdown:   1000;
--hr-z-sticky:     1100;
--hr-z-overlay:    1200;
--hr-z-modal:      1300;
--hr-z-popover:    1400;
--hr-z-toast:      1500;
--hr-z-tooltip:    1600;

/* ---------- Transitions ---------- */
--hr-transition-fast:    120ms ease-out;
--hr-transition-base:    180ms ease-out;
--hr-transition-slow:    280ms ease-out;

/* ---------- Layout ---------- */
--hr-sidebar-width:      260px;
--hr-header-height:      64px;
--hr-content-max:        1280px;
--hr-content-narrow:     720px;

/* ---------- Breakpoints (reference, used in @media) ---------- */
/* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */
}

/* ============================================================
3. RESET — Minimal, scoped to .hr-ds
============================================================
We DO NOT reset globally to avoid breaking wp-admin.
Everything is scoped under .hr-ds (root class on plugin pages).
============================================================ */

.hr-ds,
.hr-ds *,
.hr-ds *::before,
.hr-ds *::after {
box-sizing: border-box;
}

.hr-ds {
font-family: var(--hr-font-sans);
font-size: var(--hr-text-base);
font-weight: var(--hr-weight-regular);
line-height: var(--hr-leading-normal);
color: var(--hr-text-primary);
background-color: var(--hr-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1, 'liga' 1;
}

.hr-ds h1,
.hr-ds h2,
.hr-ds h3,
.hr-ds h4,
.hr-ds h5,
.hr-ds h6,
.hr-ds p,
.hr-ds figure,
.hr-ds blockquote,
.hr-ds dl,
.hr-ds dd {
margin: 0;
}

.hr-ds ul,
.hr-ds ol {
margin: 0;
padding: 0;
list-style: none;
}

.hr-ds img,
.hr-ds svg,
.hr-ds video,
.hr-ds canvas,
.hr-ds iframe {
display: block;
max-width: 100%;
}

.hr-ds button,
.hr-ds input,
.hr-ds select,
.hr-ds textarea {
font: inherit;
color: inherit;
margin: 0;
}

.hr-ds button {
background: none;
border: none;
cursor: pointer;
}

.hr-ds a {
color: var(--hr-primary);
text-decoration: none;
transition: color var(--hr-transition-fast);
}

.hr-ds a:hover {
color: var(--hr-primary-hover);
text-decoration: underline;
}

.hr-ds a:focus-visible {
outline: none;
box-shadow: var(--hr-shadow-focus);
border-radius: var(--hr-radius-sm);
}

.hr-ds hr {
border: none;
border-top: var(--hr-border-1) solid var(--hr-border);
margin: var(--hr-space-5) 0;
}

/* ============================================================
4. TYPOGRAPHY — Headings, body, helpers
============================================================ */

.hr-ds h1,
.hr-h1 {
font-size: var(--hr-text-4xl);
font-weight: var(--hr-weight-bold);
line-height: var(--hr-leading-tight);
letter-spacing: var(--hr-tracking-tight);
color: var(--hr-text-primary);
}

.hr-ds h2,
.hr-h2 {
font-size: var(--hr-text-3xl);
font-weight: var(--hr-weight-semibold);
line-height: var(--hr-leading-tight);
letter-spacing: var(--hr-tracking-tight);
color: var(--hr-text-primary);
}

.hr-ds h3,
.hr-h3 {
font-size: var(--hr-text-2xl);
font-weight: var(--hr-weight-semibold);
line-height: var(--hr-leading-snug);
color: var(--hr-text-primary);
}

.hr-ds h4,
.hr-h4 {
font-size: var(--hr-text-xl);
font-weight: var(--hr-weight-semibold);
line-height: var(--hr-leading-snug);
color: var(--hr-text-primary);
}

.hr-ds h5,
.hr-h5 {
font-size: var(--hr-text-lg);
font-weight: var(--hr-weight-semibold);
line-height: var(--hr-leading-snug);
color: var(--hr-text-primary);
}

.hr-ds h6,
.hr-h6 {
font-size: var(--hr-text-base);
font-weight: var(--hr-weight-semibold);
line-height: var(--hr-leading-snug);
color: var(--hr-text-primary);
text-transform: uppercase;
letter-spacing: var(--hr-tracking-caps);
}

.hr-ds p {
font-size: var(--hr-text-base);
line-height: var(--hr-leading-relaxed);
color: var(--hr-text-primary);
}

.hr-text-xs    { font-size: var(--hr-text-xs); }
.hr-text-sm    { font-size: var(--hr-text-sm); }
.hr-text-base  { font-size: var(--hr-text-base); }
.hr-text-lg    { font-size: var(--hr-text-lg); }
.hr-text-xl    { font-size: var(--hr-text-xl); }

.hr-text-muted     { color: var(--hr-text-muted); }
.hr-text-secondary { color: var(--hr-text-secondary); }
.hr-text-primary   { color: var(--hr-text-primary); }
.hr-text-brand     { color: var(--hr-primary); }

.hr-text-success   { color: var(--hr-success); }
.hr-text-warning   { color: var(--hr-warning); }
.hr-text-error     { color: var(--hr-error); }
.hr-text-info      { color: var(--hr-info); }

.hr-font-regular   { font-weight: var(--hr-weight-regular); }
.hr-font-medium    { font-weight: var(--hr-weight-medium); }
.hr-font-semibold  { font-weight: var(--hr-weight-semibold); }
.hr-font-bold      { font-weight: var(--hr-weight-bold); }

.hr-font-mono      { font-family: var(--hr-font-mono); }

.hr-uppercase {
text-transform: uppercase;
letter-spacing: var(--hr-tracking-caps);
}

.hr-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* ============================================================
5. LAYOUT UTILITIES
============================================================ */

.hr-container {
width: 100%;
max-width: var(--hr-content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--hr-space-5);
padding-right: var(--hr-space-5);
}

.hr-container-narrow {
max-width: var(--hr-content-narrow);
}

.hr-stack > * + * {
margin-top: var(--hr-space-4);
}

.hr-stack-sm > * + * {
margin-top: var(--hr-space-2);
}

.hr-stack-lg > * + * {
margin-top: var(--hr-space-6);
}

.hr-row {
display: flex;
align-items: center;
gap: var(--hr-space-3);
}

.hr-row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hr-space-3);
}

.hr-grid {
display: grid;
gap: var(--hr-space-4);
}

.hr-grid-2 {
grid-template-columns: repeat(2, 1fr);
}

.hr-grid-3 {
grid-template-columns: repeat(3, 1fr);
}

.hr-grid-4 {
grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
.hr-grid-2,
.hr-grid-3,
.hr-grid-4 {
  grid-template-columns: 1fr;
}
}

/* ============================================================
6. ACCESSIBILITY HELPERS
============================================================ */

.hr-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.hr-ds *:focus-visible {
outline: none;
box-shadow: var(--hr-shadow-focus);
border-radius: var(--hr-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
.hr-ds *,
.hr-ds *::before,
.hr-ds *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}
}

/* ============================================================
END OF FILE — design-system.css
Next file: components.css
============================================================ */