/* Manifolio prototype: design tokens (SPEC section 1.1). Do not edit per page.
   Density: every length is written in rem against the 16px reference (SPEC values are the 1x reference values).
   The root font-size is the one scale: 16px below 1024px (phone and tablet unchanged), 14px from 1024px (x .875).
   Text keeps floors on desktop: body and control text 13px, meta 12px. Hairlines and shadows stay in px. */
@font-face {
  font-family: "Inter";
  src: url("inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  /* doar Latin Extended-A și ș ț (14 KB în loc de 80): site-ul e în engleză și română */
  src: url("inter-ro-ext-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-017F, U+0218-021B;
}

:root {
  /* surfaces: three levels, white frame > #FAFAFA panels > white cards */
  --frame: #FFFFFF;            /* page background, frame gutters */
  --panel: #FAFAFA;            /* sidebar, top bar, content panel, field fill, hatch track */
  --card: #FFFFFF;             /* bordered cards, search pill, circle buttons */
  --row: #F6F6F6;              /* active nav row, Top content rows, keycap, modal close, preview panel */
  --media: #E5E5E5;            /* image placeholder fill */
  --cream: #FEF7EC;            /* landing final CTA section */

  /* text */
  --text-1: #0A0A0A;           /* titles, numbers, labels, list titles, active nav, field values */
  --text-2: #1F1F1F;           /* list subtitles, keycap, select text, top bar icons */
  --text-3: #575757;           /* inactive nav + icons, page subtitles, day labels, chevrons */
  --text-4: #626262;           /* section labels, timestamps, placeholders, helper lines, "(optional)" */
  --text-body-landing: #4B4B4B;/* landing card descriptions, prices "/month", FAQ answers */
  --text-on-dark: #FFFFFF;
  --text-on-dark-2: rgba(255,255,255,0.80);

  /* lines */
  --line: #E0E0E0;             /* card border, pricing border, menus (ref r03) */
  --line-field: #DFDFDF;       /* inputs, select, modal tiles */
  --line-strong: #CFCFCF;      /* outline pills, chips, preview mock */
  --line-soft: #EFEFEF;        /* table header rule, row separators inside cards */
  --hatch: #E0E0E0;            /* hatch lines on --panel */
  --rule-faq: #D9D9D9;         /* landing FAQ hairlines */

  /* brand orange */
  --orange: #F97316;           /* flat: CTAs, primary buttons, selected segment, logo, active nav icon, stat icons */
  --orange-600: #EA580C;       /* 1px selected/focus borders, gradient end */
  --orange-700: #C2410C;       /* orange TEXT on light (AA): metrics, selected chip label, links, "Changed" */
  --orange-800: #9A3412;       /* text on --orange-100 */
  --orange-50: #FFF7ED;        /* selected chip fill, "Most popular" fill, changed pill, selected table row */
  --orange-100: #FFEDD5;       /* stat icon circle */
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;       /* orange text on dark surfaces */
  --orange-border-soft: #FBD9B8;
  --grad-data: linear-gradient(90deg, #F97316 0%, #EA580C 100%);           /* bars, progress, meters */
  --grad-nav-bar: linear-gradient(180deg, #F97316 0%, #E05A13 50%, #C2410C 100%); /* active nav bar */
  --grad-icon-tile: linear-gradient(180deg, #F87318 0%, #F69239 100%);       /* landing feature icon tiles */
  --grad-product-frame: linear-gradient(180deg, #B03B0A 0%, #E46A14 100%);  /* landing product frame */
  --grad-cta-hero: linear-gradient(180deg, #F77319 0%, #EF6E14 100%);       /* landing hero primary only */

  /* growth, status, danger */
  --green-100: #DCFCE7;  --green-900: #14532D;    /* delta pills (growth) and Web Vitals "Good" only */
  --red: #DC2626;                                  /* Log out, Revoke, Delete */
  --red-50: #FEF2F2;     --red-700: #B91C1C;       /* 5xx and "Poor" pills */

  /* dark families */
  --maroon-app: #251007;       /* dashboard dark card, bulk bar, toast, code blocks base */
  --maroon-app-hi: #3D140B;    /* satin highlights */
  --maroon-track: #44140A;     /* progress track on the dark card */
  --maroon-landing: #441406;   /* landing hero, stats band, Pro card, footer, login */
  --maroon-glow: #6B260F;      /* hero glow peak */
  --maroon-social: #7D2E12;    /* footer squares */
  --code-bg: #1C0B05;          /* code blocks (darker than --maroon-app so tokens read) */

  /* radii */
  --r-modal: 2rem;  --r-panel: 1.25rem;  --r-card: 1rem;  --r-row: 1rem;
  --r-tile: 1.5rem;   --r-field: .75rem;  --r-select: .75rem; --r-mock: .75rem;
  --r-bar: .75rem;    --r-keycap: .5625rem;  --r-dark-card: .8125rem; --r-plan-card: .9375rem;
  --r-landing-card: 1.5rem; --r-landing-inner: 1rem; --r-icon-tile: .75rem;
  --r-pill: 999px;

  /* shadows (the ref is flat; only these exist) */
  --sh-circle: 0 4px 14px rgba(0,0,0,0.06);        /* white circle on white */
  --sh-circle-row: 0 4px 12px rgba(0,0,0,0.07);    /* white circle on --row */
  --sh-circle-hover: 0 6px 18px rgba(0,0,0,0.09);
  --sh-modal: 0 0 80px rgba(0,0,0,0.10);
  --sh-popover: 0 16px 48px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);
  --sh-hero-frame: 0 20px 80px rgba(0,0,0,0.12);
  --sh-cta-halo: 0 0 80px rgba(80,40,0,0.08);
  --sh-fab: 0 10px 24px rgba(249,115,22,0.30), 0 2px 6px rgba(0,0,0,0.08);
  --sh-dark-bar: 0 16px 40px rgba(37,16,7,0.28);

  /* backdrop */
  --backdrop: rgba(0,0,0,0.20);
  --backdrop-blur: blur(5px);

  /* spacing (4 px grid, plus the ref's 20/60/120) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-15: 3.75rem; --s-30: 7.5rem;

  /* control heights */
  --h-search: 3.375rem;   /* top bar search, inputs, selects */
  --h-cta: 3rem;      /* page header CTA (ref 47.6); top bar circles and avatar are 48 too */
  --h-btn: 3rem;      /* full-width primary, modal Continue, landing CTAs */
  --h-chip: 2.625rem;     /* chips, outline pill (Save draft) */
  --h-ctrl: 2.5rem;     /* card header circle, select in cards, plan button, filter chips */
  --h-pill: 1.625rem;     /* delta and status pills */

  /* layers */
  --z-sticky: 10; --z-topbar: 20; --z-fab: 30; --z-drawer: 40; --z-backdrop: 50;
  --z-modal: 60; --z-popover: 70; --z-toast: 80; --z-tooltip: 90;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* entrances, opens */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* moves, segment slides */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* exits */
  --ease-pop: cubic-bezier(0.34, 1.32, 0.64, 1);    /* small selections only (chip, tile, switch knob) */
  --d-press: 120ms; --d-hover: 200ms; --d-menu: 240ms; --d-panel: 360ms;
  --d-sheet: 420ms; --d-enter: 520ms; --d-chart: 800ms; --d-count: 900ms;

  /* fonts */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* the density scale: --k multiplies every rem; JS reads it with MF.k() */
:root { --k: 1; }
@media (min-width: 1024px) { :root { --k: .875; } }
html { font-size: calc(16px * var(--k)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--frame); color: var(--text-1);
  font-family: var(--font); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem);
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}