/* ============================================================================
   APRENDIZZAJE · C1 FOUNDATION
   Clean visual foundation for migrated components. Legacy pages remain intact
   until their dedicated C-phase migration. No priority-forcing declarations.
   ============================================================================ */
:root {
    --c1-font-display: "Bahnschrift", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --c1-font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --c1-font-data: "Cascadia Code", "SFMono-Regular", Consolas, ui-monospace, monospace;

    --c1-display-xl: clamp(2.85rem, 5.25vw, 5.65rem);
    --c1-display-lg: clamp(2.35rem, 4vw, 4.35rem);
    --c1-display-md: clamp(2rem, 3vw, 3.15rem);
    --c1-h1: clamp(1.8rem, 2.5vw, 2.6rem);
    --c1-h2: clamp(1.45rem, 2vw, 2rem);
    --c1-h3: clamp(1.18rem, 1.5vw, 1.45rem);
    --c1-h4: 1rem;
    --c1-body-lg: 1.0625rem;
    --c1-body: .975rem;
    --c1-body-sm: .875rem;
    --c1-label: .775rem;
    --c1-caption: .72rem;
    --c1-metric-xl: clamp(2rem, 3.2vw, 3.55rem);
    --c1-metric: clamp(1.45rem, 2.2vw, 2.25rem);

    --c1-line-display: .94;
    --c1-line-heading: 1.08;
    --c1-line-body: 1.62;
    --c1-line-compact: 1.35;
    --c1-track-display: -.045em;
    --c1-track-heading: -.028em;
    --c1-track-label: .085em;
    --c1-reading-width: 68ch;

    --c1-space-1: 4px;
    --c1-space-2: 8px;
    --c1-space-3: 12px;
    --c1-space-4: 16px;
    --c1-space-5: 20px;
    --c1-space-6: 24px;
    --c1-space-7: 32px;
    --c1-space-8: 40px;
    --c1-space-9: 48px;
    --c1-space-10: 64px;
    --c1-space-11: 80px;

    --c1-page-max: 1600px;
    --c1-content-max: 1240px;
    --c1-page-gutter: clamp(18px, 3vw, 48px);
    --c1-section-gap: clamp(22px, 2.4vw, 36px);
    --c1-grid-gap: clamp(14px, 1.45vw, 24px);

    --c1-radius-xs: 10px;
    --c1-radius-sm: 14px;
    --c1-radius-md: 18px;
    --c1-radius-lg: 24px;
    --c1-radius-xl: 32px;
    --c1-radius-hero: 40px;
    --c1-radius-pill: 999px;

    --c1-navy-950: #081327;
    --c1-navy-900: #0b1f3a;
    --c1-navy-800: #17385f;
    --c1-ink: #12213a;
    --c1-ink-soft: #40516d;
    --c1-muted: #687994;
    --c1-faint: #8d9ab0;
    --c1-white: #ffffff;
    --c1-canvas: #f4f8fc;
    --c1-surface: #ffffff;
    --c1-surface-soft: #f7faff;
    --c1-surface-blue: #eef6ff;
    --c1-line: #dbe5f0;
    --c1-line-strong: #c5d3e3;

    --c1-primary: #176fe5;
    --c1-primary-deep: #0f58bc;
    --c1-primary-soft: #e9f3ff;
    --c1-cyan: #0aa9d8;
    --c1-cyan-soft: #e5f8fd;
    --c1-success: #17845d;
    --c1-success-soft: #e9f8f2;
    --c1-warning: #b76a07;
    --c1-warning-soft: #fff4dc;
    --c1-danger: #be4051;
    --c1-danger-soft: #fff0f2;
    --c1-reward: #d49418;
    --c1-reward-soft: #fff8db;

    --c1-shadow-xs: 0 2px 8px rgba(10, 29, 55, .055);
    --c1-shadow-sm: 0 8px 24px rgba(10, 29, 55, .08), 0 1px 2px rgba(10, 29, 55, .04);
    --c1-shadow-card: 0 16px 40px rgba(10, 29, 55, .09), 0 3px 9px rgba(10, 29, 55, .04);
    --c1-shadow-float: 0 28px 72px rgba(10, 29, 55, .16), 0 6px 18px rgba(10, 29, 55, .06);
    --c1-shadow-blue: 0 18px 42px rgba(23, 111, 229, .21);
    --c1-shadow-reward: 0 18px 44px rgba(212, 148, 24, .18);
    --c1-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, .86);

    --c1-control-h: 46px;
    --c1-control-h-lg: 54px;
    --c1-focus-ring: 0 0 0 3px rgba(23, 111, 229, .2), 0 0 0 1px rgba(23, 111, 229, .72);
    --c1-fast: 140ms;
    --c1-medium: 240ms;
    --c1-slow: 420ms;
    --c1-ease: cubic-bezier(.2, .8, .2, 1);
}

.c1-scope,
.c1-system-enabled {
    font-family: var(--c1-font-body);
    color: var(--c1-ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.c1-scope *,
.c1-scope *::before,
.c1-scope *::after { box-sizing: border-box; }

.c1-scope :where(h1,h2,h3,h4,p) { margin-block-start: 0; }
.c1-scope :where(h1,h2,h3,h4) {
    font-family: var(--c1-font-display);
    color: var(--c1-navy-950);
    text-wrap: balance;
}
.c1-scope :where(h1) { font-size: var(--c1-h1); line-height: var(--c1-line-heading); letter-spacing: var(--c1-track-heading); }
.c1-scope :where(h2) { font-size: var(--c1-h2); line-height: var(--c1-line-heading); letter-spacing: var(--c1-track-heading); }
.c1-scope :where(h3) { font-size: var(--c1-h3); line-height: 1.16; letter-spacing: -.018em; }
.c1-scope :where(h4) { font-size: var(--c1-h4); line-height: 1.2; }
.c1-scope :where(p) { max-width: var(--c1-reading-width); line-height: var(--c1-line-body); color: var(--c1-ink-soft); }
.c1-scope :where(small) { font-size: var(--c1-caption); line-height: 1.4; }

.c1-display-xl,
.c1-display-lg,
.c1-display-md {
    margin: 0;
    font-family: var(--c1-font-display);
    color: var(--c1-navy-950);
    font-weight: 850;
    letter-spacing: var(--c1-track-display);
    line-height: var(--c1-line-display);
    text-wrap: balance;
}
.c1-display-xl { font-size: var(--c1-display-xl); }
.c1-display-lg { font-size: var(--c1-display-lg); }
.c1-display-md { font-size: var(--c1-display-md); }
.c1-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--c1-label);
    line-height: 1;
    font-weight: 850;
    letter-spacing: var(--c1-track-label);
    text-transform: uppercase;
    color: var(--c1-primary-deep);
}
.c1-label { font-size: var(--c1-label); font-weight: 800; letter-spacing: .045em; }
.c1-caption { font-size: var(--c1-caption); color: var(--c1-muted); }
.c1-metric { font-family: var(--c1-font-data); font-size: var(--c1-metric); font-weight: 800; letter-spacing: -.045em; }
.c1-metric-xl { font-family: var(--c1-font-data); font-size: var(--c1-metric-xl); font-weight: 850; letter-spacing: -.055em; }

.c1-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--c1-grid-gap); }
.c1-span-12 { grid-column: span 12; }
.c1-span-8 { grid-column: span 8; }
.c1-span-6 { grid-column: span 6; }
.c1-span-4 { grid-column: span 4; }
.c1-span-3 { grid-column: span 3; }

.c1-page {
    width: min(calc(100% - (var(--c1-page-gutter) * 2)), var(--c1-page-max));
    margin-inline: auto;
}

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

@media (max-width: 1100px) {
    .c1-span-8, .c1-span-6, .c1-span-4, .c1-span-3 { grid-column: span 6; }
}
@media (max-width: 760px) {
    :root { --c1-page-gutter: 16px; --c1-section-gap: 20px; --c1-grid-gap: 14px; }
    .c1-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .c1-span-12, .c1-span-8, .c1-span-6, .c1-span-4, .c1-span-3 { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .c1-scope *, .c1-scope *::before, .c1-scope *::after { scroll-behavior: auto; }
}