/* ==========================================================================
   Apple Design System — jetoane (valori citite din Apple macOS 27 UI Kit, Sketch, sRGB)
   Sursa fiecărei valori: ../tokens/macos-27.tokens.json + ../rules/components-spec.md
   Prefix: --ap-   ·   Teme: light implicit · [data-ap-theme="dark"] · [data-ap-theme="auto"] urmează sistemul (prefers-color-scheme)
   Mărimi de control: .ap-mini .ap-small .ap-regular(implicit) .ap-large .ap-xlarge — se pun pe orice container
   ========================================================================== */

:root {
  /* ---------- Fonturi (SF Pro nu se servește ca webfont; pe Apple îl dă sistemul) ---------- */
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ap-font-rounded: ui-rounded, "SF Pro Rounded", var(--ap-font);
  --ap-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ap-font-serif: ui-serif, "New York", Georgia, serif;

  /* ---------- Scara de text macOS: mărime / interlinie; greutate implicită → accentuată ---------- */
  --ap-large-title: 26px;  --ap-large-title-lh: 32px;  /* Regular → Bold */
  --ap-title1: 22px;       --ap-title1-lh: 26px;       /* Regular → Bold */
  --ap-title2: 17px;       --ap-title2-lh: 22px;       /* Regular → Bold */
  --ap-title3: 15px;       --ap-title3-lh: 20px;       /* Regular → Semibold */
  --ap-headline: 13px;     --ap-headline-lh: 16px;     /* Bold → Heavy */
  --ap-body: 13px;         --ap-body-lh: 16px;         /* Regular → Semibold */
  --ap-callout: 12px;      --ap-callout-lh: 15px;      /* Regular → Semibold */
  --ap-subheadline: 11px;  --ap-subheadline-lh: 14px;  /* Regular → Semibold */
  --ap-footnote: 10px;     --ap-footnote-lh: 13px;     /* Regular → Semibold */
  --ap-caption: 10px;      --ap-caption-lh: 13px;      /* Regular → Semibold (Caption 1 și 2) */
  --ap-lh-loose: 2px;      /* varianta Loose = +2 px interlinie; Tight = −2 px */
  --ap-w-regular: 400; --ap-w-medium: 500; --ap-w-semibold: 600; --ap-w-bold: 700; --ap-w-heavy: 800;
  --ap-w-control: 500;     /* etichetele controalelor sunt SF Pro Medium */

  /* ---------- Raze ---------- */
  --ap-r-window: 16px;   --ap-r-window-form: 26px;  --ap-r-panel: 15px;
  --ap-r-glass-lg: 26px; --ap-r-glass-md: 20px;     --ap-r-menu: 12px;  --ap-r-group: 12px;
  --ap-r-selection: 8px; --ap-r-image: 6px;         --ap-r-capsule: 999px;
  --ap-corner-k: 1;                  /* devine 1.3 acolo unde browserul știe corner-shape (vezi apple-components.css) */
  --ap-corner-smoothing: 0.6;        /* colț continuu; în CSS: corner-shape: superellipse(1.5) unde există */

  /* ---------- Spațiere (grilă de 2/4 px văzută în kit) ---------- */
  --ap-s-1: 2px; --ap-s-2: 4px; --ap-s-3: 6px; --ap-s-4: 8px; --ap-s-5: 10px; --ap-s-6: 12px;
  --ap-s-7: 14px; --ap-s-8: 16px; --ap-s-9: 20px; --ap-s-10: 24px; --ap-s-11: 32px; --ap-s-12: 40px;

  /* ---------- Geometrie fixă ---------- */
  --ap-toolbar-h: 52px;  --ap-toolbar-h-compact: 40px;  --ap-toolbar-pad: 8px;  --ap-toolbar-gap: 8px;  --ap-titlebar-h: 33px;
  --ap-dialog-w: 390px; --ap-dialog-label-w: 92px; --ap-panel-titlebar-h: 56px;
  --ap-toolbar-item: 36px; --ap-toolbar-btn: 28px; --ap-toolbar-group-gap: 9px;
  --ap-sidebar-w: 256px; --ap-sidebar-pad: 14px; --ap-sidebar-inset: 8px; --ap-sidebar-indent: 12px;
  --ap-sidebar-row-lg: 40px; --ap-sidebar-row-md: 32px; --ap-sidebar-row-sm: 24px;
  --ap-menu-item-h: 24px; --ap-menu-item-h-sm: 22px; --ap-menu-item-h-mini: 19px; --ap-menu-sep-h: 11px;
  --ap-form-row-pad: 12px; --ap-form-pad-x: 10px; --ap-form-row-min: 40px;
  --ap-alert-w: 260px; --ap-notification-w: 344px; --ap-scrollbar-w: 12px; --ap-scrollbar-thumb: 6px;
  --ap-traffic: 14px; --ap-traffic-gap: 9px;

  /* ---------- Mișcare (HIG: scurtă, cu sens; se oprește la prefers-reduced-motion) ---------- */
  --ap-ease: cubic-bezier(.25, .1, .25, 1); --ap-ease-out: cubic-bezier(.2, .8, .2, 1);
  --ap-dur-1: 100ms; --ap-dur-2: 200ms; --ap-dur-3: 350ms;

  /* ---------- Mărimea de control implicită: Regular (24) ---------- */
  --ap-ctl-h: 24px; --ap-ctl-font: 13px; --ap-ctl-lh: 16px; --ap-ctl-glyph: 13px;
  --ap-btn-pad-x: 16px; --ap-btn-r: 6px;
  --ap-field-r: 6px; --ap-field-pad-x: 6px;
  --ap-popup-pad-l: 12px;
  --ap-search-pad-l: 8px; --ap-search-text-x: 32px;
  --ap-check: 16px; --ap-check-r: 5.5px; --ap-check-gap: 5px;
  --ap-switch-w: 54px; --ap-switch-h: 24px; --ap-knob-w: 32px; --ap-knob-h: 20px; --ap-knob-inset: 2px;
  --ap-stepper-w: 20px; --ap-stepper-r: 6px;
  --ap-seg-w: 30px; --ap-seg-sep-h: 14px; --ap-seg-r: 6px;
  --ap-track-h: 6px; --ap-slider-knob-w: 20px; --ap-slider-knob-h: 16px;
  --ap-well-w: 48px;
  --ap-check-row: 24px; --ap-combo-w: 24px; --ap-combo-h: 20px; --ap-combo-inset: 2px; --ap-combo-r: 4.5px;
}

/* ---------- Cele cinci mărimi de control (înălțimi 16 / 20 / 24 / 28 / 36) ---------- */
.ap-mini {
  --ap-check-row: 14px; --ap-combo-w: 16px; --ap-combo-h: 12px; --ap-combo-inset: 2px; --ap-combo-r: 2.5px;
  --ap-ctl-h: 16px; --ap-ctl-font: 10px; --ap-ctl-lh: 13px; --ap-ctl-glyph: 10px;
  --ap-btn-pad-x: 7px; --ap-btn-r: 4px; --ap-field-r: 4px; --ap-field-pad-x: 6px; --ap-popup-pad-l: 7px;
  --ap-search-pad-l: 6px; --ap-search-text-x: 26px;
  --ap-check: 12px; --ap-check-r: 3.5px; --ap-check-gap: 3px;
  --ap-switch-w: 36px; --ap-switch-h: 16px; --ap-knob-w: 21px; --ap-knob-h: 13px; --ap-knob-inset: 1.5px;
  --ap-stepper-w: 13px; --ap-stepper-r: 4px; --ap-seg-w: 23px; --ap-seg-sep-h: 10px; --ap-seg-r: 4px;
  --ap-track-h: 4px; --ap-slider-knob-w: 16px; --ap-slider-knob-h: 12px; --ap-well-w: 32px;
}
.ap-small {
  --ap-check-row: 18px; --ap-combo-w: 20px; --ap-combo-h: 16px; --ap-combo-inset: 2px; --ap-combo-r: 3.5px;
  --ap-ctl-h: 20px; --ap-ctl-font: 11px; --ap-ctl-lh: 14px; --ap-ctl-glyph: 11px;
  --ap-btn-pad-x: 10px; --ap-btn-r: 5px; --ap-field-r: 5px; --ap-field-pad-x: 6px; --ap-popup-pad-l: 10px;
  --ap-search-pad-l: 6px; --ap-search-text-x: 30px;
  --ap-check: 14px; --ap-check-r: 4.5px; --ap-check-gap: 4px;
  --ap-switch-w: 44px; --ap-switch-h: 20px; --ap-knob-w: 26px; --ap-knob-h: 16px; --ap-knob-inset: 2px;
  --ap-stepper-w: 17px; --ap-stepper-r: 5px; --ap-seg-w: 26px; --ap-seg-sep-h: 12px; --ap-seg-r: 5px;
  --ap-track-h: 4px; --ap-slider-knob-w: 18px; --ap-slider-knob-h: 14px; --ap-well-w: 40px;
}
.ap-regular {
  --ap-check-row: 24px; --ap-combo-w: 24px; --ap-combo-h: 20px; --ap-combo-inset: 2px; --ap-combo-r: 4.5px;
  --ap-ctl-h: 24px; --ap-ctl-font: 13px; --ap-ctl-lh: 16px; --ap-ctl-glyph: 13px;
  --ap-btn-pad-x: 16px; --ap-btn-r: 6px; --ap-field-r: 6px; --ap-field-pad-x: 6px; --ap-popup-pad-l: 12px;
  --ap-search-pad-l: 8px; --ap-search-text-x: 32px;
  --ap-check: 16px; --ap-check-r: 5.5px; --ap-check-gap: 5px;
  --ap-switch-w: 54px; --ap-switch-h: 24px; --ap-knob-w: 32px; --ap-knob-h: 20px; --ap-knob-inset: 2px;
  --ap-stepper-w: 20px; --ap-stepper-r: 6px; --ap-seg-w: 30px; --ap-seg-sep-h: 14px; --ap-seg-r: 6px;
  --ap-track-h: 6px; --ap-slider-knob-w: 20px; --ap-slider-knob-h: 16px; --ap-well-w: 48px;
}
.ap-large {
  --ap-check-row: 28px; --ap-combo-w: 24px; --ap-combo-h: 24px; --ap-combo-inset: 2px; --ap-combo-r: 5.5px;
  --ap-ctl-h: 28px; --ap-ctl-font: 13px; --ap-ctl-lh: 16px; --ap-ctl-glyph: 13px;
  --ap-btn-pad-x: 16px; --ap-btn-r: 999px; --ap-field-r: 7px; --ap-field-pad-x: 8px; --ap-popup-pad-l: 14px;
  --ap-search-pad-l: 8px; --ap-search-text-x: 32px;
  --ap-check: 18px; --ap-check-r: 6.5px; --ap-check-gap: 5px;
  --ap-switch-w: 64px; --ap-switch-h: 28px; --ap-knob-w: 38px; --ap-knob-h: 24px; --ap-knob-inset: 2px;
  --ap-stepper-w: 23px; --ap-stepper-r: 7px; --ap-seg-w: 34px; --ap-seg-sep-h: 18px; --ap-seg-r: 999px;
  --ap-track-h: 6px; --ap-slider-knob-w: 24px; --ap-slider-knob-h: 20px; --ap-well-w: 56px;
}
.ap-xlarge {
  --ap-check-row: 36px; --ap-combo-w: 30px; --ap-combo-h: 30px; --ap-combo-inset: 3px; --ap-combo-r: 6.5px;
  --ap-ctl-h: 36px; --ap-ctl-font: 13px; --ap-ctl-lh: 16px; --ap-ctl-glyph: 13px;
  --ap-btn-pad-x: 16px; --ap-btn-r: 999px; --ap-field-r: 9px; --ap-field-pad-x: 10px; --ap-popup-pad-l: 18px;
  --ap-search-pad-l: 10px; --ap-search-text-x: 34px;
  --ap-check: 18px; --ap-check-r: 6.5px; --ap-check-gap: 7px;
  --ap-switch-w: 80px; --ap-switch-h: 36px; --ap-knob-w: 47px; --ap-knob-h: 30px; --ap-knob-inset: 3px;
  --ap-stepper-w: 30px; --ap-stepper-r: 9px; --ap-seg-w: 38px; --ap-seg-sep-h: 20px; --ap-seg-r: 999px;
  --ap-track-h: 6px; --ap-slider-knob-w: 24px; --ap-slider-knob-h: 20px; --ap-well-w: 72px;
}

/* ==========================================================================
   CULORI — LIGHT
   ========================================================================== */
:root, [data-ap-theme="light"] {
  color-scheme: light;
  /* culori de sistem */
  --ap-red: #FF383C; --ap-orange: #FF8D28; --ap-yellow: #FFCC00; --ap-green: #34C759; --ap-mint: #00C8B3;
  --ap-teal: #00C3D0; --ap-cyan: #00C0E8; --ap-blue: #0088FF; --ap-indigo: #6155F5; --ap-purple: #CB30E0;
  --ap-pink: #FF2D55; --ap-brown: #AC7F5E; --ap-gray: #8E8E93;
  /* varianta „vibrant” (peste materiale/sticlă; în kit: „use plus darker”) */
  --ap-red-v: #F52F32; --ap-orange-v: #F58625; --ap-yellow-v: #F5C200; --ap-green-v: #26BF4D; --ap-mint-v: #00BDA9;
  --ap-teal-v: #00B3BF; --ap-cyan-v: #00ABCF; --ap-blue-v: #0078F0; --ap-indigo-v: #5C50E6; --ap-purple-v: #B72BC9;
  --ap-pink-v: #F5234B; --ap-brown-v: #9E7354; --ap-gray-v: #848489;
  --ap-accent: var(--ap-blue); --ap-accent-v: var(--ap-blue-v); --ap-accent-rgb: 0 136 255;
  --ap-menu-highlight: #0069F9; --ap-on-accent: #FFFFFF;

  /* etichete (text) */
  --ap-label: rgb(0 0 0 / .85); --ap-label-2: rgb(0 0 0 / .5); --ap-label-3: rgb(0 0 0 / .25);
  --ap-label-4: rgb(0 0 0 / .1); --ap-label-5: rgb(0 0 0 / .05); --ap-label-6: rgb(0 0 0 / .03);
  /* etichete peste sticlă/material */
  --ap-label-v: #363636; --ap-label-v2: #737373; --ap-label-v3: #B2B2B2; --ap-label-v4: #D9D9D9; --ap-label-v5: #E6E6E6;
  /* umpleri */
  --ap-fill: rgb(0 0 0 / .1); --ap-fill-2: rgb(0 0 0 / .08); --ap-fill-3: rgb(0 0 0 / .05);
  --ap-fill-4: rgb(0 0 0 / .03); --ap-fill-5: rgb(0 0 0 / .02);
  --ap-fill-v: rgb(0 0 0 / .15); --ap-fill-v2: rgb(0 0 0 / .07); --ap-fill-v3: rgb(0 0 0 / .05);
  --ap-glyph: rgb(0 0 0 / .7); --ap-glyph-disabled: rgb(0 0 0 / .22);

  /* suprafețe */
  --ap-window: #FFFFFF; --ap-content: #FFFFFF; --ap-under-page: #F5F5F7;
  --ap-separator: rgb(60 60 67 / .29); --ap-separator-soft: rgb(0 0 0 / .05); --ap-menu-separator: rgb(0 0 0 / .07);
  --ap-sidebar-bg: rgb(250 250 250 / .8); --ap-sidebar-bg-inactive: #F4F4F4; --ap-sidebar-bg-web: #F4F4F4; --ap-seg-raised: #FFFFFF; --ap-badge-ink: #000; --ap-sidebar-blur: 100px; --ap-sidebar-sat: 1;
  --ap-selection-row: rgb(0 0 0 / .055);          /* negru 11% × opacitate 0.5 */
  --ap-overlay: rgb(171 171 171 / .6);            /* vălul din spatele alertei modale */

  /* controale */
  --ap-ctl-bg: rgb(0 0 0 / .08); --ap-ctl-bg-hover: rgb(0 0 0 / .11); --ap-ctl-bg-active: rgb(0 0 0 / .16); --ap-ctl-bg-disabled: rgb(0 0 0 / .04);
  --ap-ctl-glass-bg: rgb(0 0 0 / .12);            /* buton bordurat peste sticlă */
  --ap-ctl-off: rgb(0 0 0 / .1); --ap-ctl-off-active: rgb(0 0 0 / .19);
  --ap-link: #006CD8;                            /* text albastru cu contrast AA */
  --ap-prominent: #006CD8; --ap-prominent-hover: #005FC2; --ap-prominent-active: #005BB5;
  --ap-on-prominent: #FFFFFF;                    /* cerneala butonului, separat de accent */
  --ap-tinted: 22%; --ap-tinted-active: 28%; --ap-tinted-disabled: 10%; --ap-destructive-tint: 20%;
  --ap-toggle-on-bg: rgb(0 136 255 / .06);
  --ap-field-bg: #FFFFFF; --ap-field-border: rgb(0 0 0 / .05); --ap-field-bg-disabled: rgb(255 255 255 / .5);
  --ap-focus-ring: 0 0 0 3.5px rgb(0 136 255 / .25), 0 0 0 1px rgb(0 136 255 / .15);
  --ap-field-focus: 0 0 0 3.5px rgb(0 136 255 / .5);
  --ap-knob: #FFFFFF; --ap-knob-shadow: 0 .5px 6px rgb(0 0 0 / .12); --ap-switch-knob-shadow: 0 3px 36px rgb(0 0 0 / .05), 0 0 1px rgb(0 0 0 / .2);
  --ap-progress-track: rgb(0 0 0 / .06); --ap-progress-border: rgb(0 0 0 / .07); --ap-tick: rgb(0 0 0 / .25);
  --ap-scrollbar: rgb(0 0 0 / .5); --ap-spinner: 0 0 0;

  /* materiale: culoare + blur + saturație */
  --ap-mat-ultrathick: rgb(236 236 236 / .88); --ap-mat-thick: rgb(236 236 236 / .76); --ap-mat-regular: rgb(236 236 236 / .63);
  --ap-mat-thin: rgb(236 236 236 / .5); --ap-mat-ultrathin: rgb(236 236 236 / .38);
  --ap-mat-blur: 60px; --ap-mat-sat-thick: 2; --ap-mat-sat: 1.45;

  /* Liquid Glass (aproximare web a stivei din kit) */
  --ap-glass-bg: rgb(255 255 255 / .7); --ap-glass-tint: rgb(191 191 191 / .1); --ap-glass-blur: 30px;
  --ap-glass-menu-bg: rgb(230 230 230 / .55); --ap-glass-menu-blur: 20px;
  --ap-glass-small-bg: rgb(255 255 255 / .62); --ap-glass-small-blur: 12px;
  --ap-glass-rim: inset 0 0 0 .5px rgb(255 255 255 / .9), inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 1px rgb(0 0 0 / .05);
  --ap-tooltip-bg: rgb(231 231 231 / .85); --ap-tooltip-text: #4C4C4C;
  --ap-notification-bg: rgb(245 245 245 / .72);

  /* umbre */
  --ap-sh-window: 0 36px 100px rgb(0 0 0 / .4), 0 0 1px rgb(0 0 0 / .8);
  --ap-sh-window-inactive: 0 16px 32px rgb(0 0 0 / .2), 0 0 1px rgb(0 0 0 / .8);
  --ap-sh-panel: 0 5px 20px rgb(0 0 0 / .3);
  --ap-sh-menu: 0 4px 24px rgb(0 0 0 / .3), 0 0 0 .5px rgb(0 0 0 / .2);
  --ap-sh-popover: 0 18px 46px rgb(0 0 0 / .25);
  --ap-sh-notification: 0 4px 16px rgb(0 0 0 / .1);
  --ap-sh-tooltip: 0 2px 8px rgb(0 0 0 / .2), 0 0 2px rgb(0 0 0 / .4);
  --ap-sh-glass-small: 0 8px 15px rgb(0 0 0 / .08), 0 0 0 .5px rgb(0 0 0 / .08);
  --ap-traffic-close: #FF5C60; --ap-traffic-min: #FAC800; --ap-traffic-zoom: #35C759; --ap-traffic-ring: rgb(0 0 0 / .45);
  --ap-traffic-inactive: rgb(0 0 0 / .12);
}

/* ==========================================================================
   CULORI — DARK
   ========================================================================== */
[data-ap-theme="dark"] {
  color-scheme: dark;
  --ap-red: #FF4245; --ap-orange: #FF9230; --ap-yellow: #FFD600; --ap-green: #30D158; --ap-mint: #00DAC3;
  --ap-teal: #00D2E0; --ap-cyan: #3CD3FE; --ap-blue: #0091FF; --ap-indigo: #6D7CFF; --ap-purple: #DB34F2;
  --ap-pink: #FF375F; --ap-brown: #B78A66; --ap-gray: #98989D;
  --ap-red-v: #FF4747; --ap-orange-v: #FF9E33; --ap-yellow-v: #FFE014; --ap-green-v: #3BDB63; --ap-mint-v: #2DE0CD;
  --ap-teal-v: #2DD7E0; --ap-cyan-v: #47D8FC; --ap-blue-v: #0A99FF; --ap-indigo-v: #7163FF; --ap-purple-v: #E647FC;
  --ap-pink-v: #FF4169; --ap-brown-v: #C29672; --ap-gray-v: #A2A2A7;
  --ap-accent: var(--ap-blue); --ap-accent-v: var(--ap-blue-v); --ap-accent-rgb: 0 145 255;
  --ap-menu-highlight: #0069F9; --ap-on-accent: #FFFFFF;

  --ap-label: #FFFFFF; --ap-label-2: rgb(255 255 255 / .55); --ap-label-3: rgb(255 255 255 / .25);
  --ap-label-4: rgb(255 255 255 / .1); --ap-label-5: rgb(255 255 255 / .05); --ap-label-6: rgb(255 255 255 / .03);
  --ap-label-v: rgb(255 255 255 / .96); --ap-label-v2: #8A8A8A; --ap-label-v3: #4C4C4C; --ap-label-v4: #262626; --ap-label-v5: #121212;
  --ap-fill: rgb(255 255 255 / .1); --ap-fill-2: rgb(255 255 255 / .08); --ap-fill-3: rgb(255 255 255 / .05);
  --ap-fill-4: rgb(255 255 255 / .03); --ap-fill-5: rgb(255 255 255 / .02);
  --ap-fill-v: rgb(255 255 255 / .14); --ap-fill-v2: rgb(255 255 255 / .08); --ap-fill-v3: rgb(255 255 255 / .05);
  --ap-glyph: rgb(255 255 255 / .7); --ap-glyph-disabled: rgb(255 255 255 / .22);

  --ap-window: #1E1E1E; --ap-content: #1E1E1E; --ap-under-page: #000000;
  --ap-separator: rgb(255 255 255 / .12); --ap-separator-soft: rgb(255 255 255 / .05); --ap-menu-separator: rgb(255 255 255 / .1);
  --ap-sidebar-bg: rgb(12 12 12 / .85); --ap-sidebar-bg-inactive: rgb(46 46 46 / .85); --ap-sidebar-bg-web: #262626; --ap-seg-raised: rgb(255 255 255 / .22); --ap-badge-ink: #fff; --ap-sidebar-blur: 80px; --ap-sidebar-sat: 2;
  --ap-selection-row: rgb(255 255 255 / .08);
  --ap-overlay: rgb(0 0 0 / .45);

  --ap-ctl-bg: rgb(255 255 255 / .07); --ap-ctl-bg-hover: rgb(255 255 255 / .1); --ap-ctl-bg-active: rgb(255 255 255 / .16); --ap-ctl-bg-disabled: rgb(255 255 255 / .04);
  --ap-ctl-glass-bg: rgb(255 255 255 / .12);
  --ap-ctl-off: rgb(255 255 255 / .1); --ap-ctl-off-active: rgb(255 255 255 / .19);
  --ap-link: #0091FF;
  --ap-prominent: #0091FF; --ap-prominent-hover: #159AFF; --ap-prominent-active: #23A3FF;
  --ap-on-prominent: #000000;
  --ap-tinted: 20%; --ap-tinted-active: 28%; --ap-tinted-disabled: 12%; --ap-destructive-tint: 22%;
  --ap-toggle-on-bg: rgb(0 145 255 / .12);
  --ap-field-bg: #1E1E1E; --ap-field-border: rgb(255 255 255 / .04); --ap-field-bg-disabled: rgb(30 30 30 / .5);
  --ap-focus-ring: 0 0 0 3.5px rgb(0 145 255 / .3), 0 0 0 1px rgb(0 145 255 / .2);
  --ap-field-focus: 0 0 0 3.5px rgb(0 145 255 / .5);
  --ap-knob: #FFFFFF; --ap-knob-shadow: 0 .5px 6px rgb(0 0 0 / .3); --ap-switch-knob-shadow: 0 0 4px rgb(0 0 0 / .2), 0 0 1px rgb(0 0 0 / .3);
  --ap-progress-track: rgb(255 255 255 / .1); --ap-progress-border: rgb(255 255 255 / .05); --ap-tick: rgb(255 255 255 / .25);
  --ap-scrollbar: rgb(255 255 255 / .5); --ap-spinner: 255 255 255;

  --ap-mat-ultrathick: rgb(44 44 44 / .82); --ap-mat-thick: rgb(44 44 44 / .71); --ap-mat-regular: rgb(44 44 44 / .61);
  --ap-mat-thin: rgb(41 41 41 / .49); --ap-mat-ultrathin: rgb(41 41 41 / .4);
  --ap-mat-blur: 60px; --ap-mat-sat-thick: 1.9; --ap-mat-sat: 1.9;

  --ap-glass-bg: rgb(40 40 40 / .7); --ap-glass-tint: rgb(255 255 255 / .04); --ap-glass-blur: 30px;
  --ap-glass-menu-bg: rgb(36 36 36 / .6); --ap-glass-menu-blur: 20px;
  --ap-glass-small-bg: rgb(60 60 60 / .55); --ap-glass-small-blur: 12px;
  --ap-glass-rim: inset 0 0 0 .5px rgb(255 255 255 / .16), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 1px rgb(0 0 0 / .3);
  --ap-tooltip-bg: rgb(44 44 44 / .9); --ap-tooltip-text: rgb(255 255 255 / .8);
  --ap-notification-bg: rgb(40 40 40 / .72);

  --ap-sh-window: 0 36px 100px rgb(0 0 0 / .4), 0 0 1px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .2);
  --ap-sh-window-inactive: 0 16px 32px rgb(0 0 0 / .2), 0 0 1px rgb(0 0 0 / .8);
  --ap-sh-panel: 0 16px 33px rgb(0 0 0 / .4), 0 0 1px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .2);
  --ap-sh-menu: 0 4px 24px rgb(0 0 0 / .5), 0 0 0 .5px rgb(0 0 0 / .8);
  --ap-sh-popover: 0 18px 46px rgb(0 0 0 / .5);
  --ap-sh-notification: 0 4px 16px rgb(0 0 0 / .3);
  --ap-sh-tooltip: 0 2px 8px rgb(0 0 0 / .4), 0 0 2px rgb(0 0 0 / .6);
  --ap-sh-glass-small: 0 8px 15px rgb(0 0 0 / .25), 0 0 0 .5px rgb(0 0 0 / .4);
  --ap-traffic-inactive: rgb(255 255 255 / .16);
}

/* auto: aceleași valori ca „dark”, doar când sistemul e pe întunecat (generat din blocul de mai sus — se țin identice) */
@media (prefers-color-scheme: dark) {
[data-ap-theme="auto"] {
  color-scheme: dark;
  --ap-red: #FF4245; --ap-orange: #FF9230; --ap-yellow: #FFD600; --ap-green: #30D158; --ap-mint: #00DAC3;
  --ap-teal: #00D2E0; --ap-cyan: #3CD3FE; --ap-blue: #0091FF; --ap-indigo: #6D7CFF; --ap-purple: #DB34F2;
  --ap-pink: #FF375F; --ap-brown: #B78A66; --ap-gray: #98989D;
  --ap-red-v: #FF4747; --ap-orange-v: #FF9E33; --ap-yellow-v: #FFE014; --ap-green-v: #3BDB63; --ap-mint-v: #2DE0CD;
  --ap-teal-v: #2DD7E0; --ap-cyan-v: #47D8FC; --ap-blue-v: #0A99FF; --ap-indigo-v: #7163FF; --ap-purple-v: #E647FC;
  --ap-pink-v: #FF4169; --ap-brown-v: #C29672; --ap-gray-v: #A2A2A7;
  --ap-accent: var(--ap-blue); --ap-accent-v: var(--ap-blue-v); --ap-accent-rgb: 0 145 255;
  --ap-menu-highlight: #0069F9; --ap-on-accent: #FFFFFF;

  --ap-label: #FFFFFF; --ap-label-2: rgb(255 255 255 / .55); --ap-label-3: rgb(255 255 255 / .25);
  --ap-label-4: rgb(255 255 255 / .1); --ap-label-5: rgb(255 255 255 / .05); --ap-label-6: rgb(255 255 255 / .03);
  --ap-label-v: rgb(255 255 255 / .96); --ap-label-v2: #8A8A8A; --ap-label-v3: #4C4C4C; --ap-label-v4: #262626; --ap-label-v5: #121212;
  --ap-fill: rgb(255 255 255 / .1); --ap-fill-2: rgb(255 255 255 / .08); --ap-fill-3: rgb(255 255 255 / .05);
  --ap-fill-4: rgb(255 255 255 / .03); --ap-fill-5: rgb(255 255 255 / .02);
  --ap-fill-v: rgb(255 255 255 / .14); --ap-fill-v2: rgb(255 255 255 / .08); --ap-fill-v3: rgb(255 255 255 / .05);
  --ap-glyph: rgb(255 255 255 / .7); --ap-glyph-disabled: rgb(255 255 255 / .22);

  --ap-window: #1E1E1E; --ap-content: #1E1E1E; --ap-under-page: #000000;
  --ap-separator: rgb(255 255 255 / .12); --ap-separator-soft: rgb(255 255 255 / .05); --ap-menu-separator: rgb(255 255 255 / .1);
  --ap-sidebar-bg: rgb(12 12 12 / .85); --ap-sidebar-bg-inactive: rgb(46 46 46 / .85); --ap-sidebar-bg-web: #262626; --ap-seg-raised: rgb(255 255 255 / .22); --ap-badge-ink: #fff; --ap-sidebar-blur: 80px; --ap-sidebar-sat: 2;
  --ap-selection-row: rgb(255 255 255 / .08);
  --ap-overlay: rgb(0 0 0 / .45);

  --ap-ctl-bg: rgb(255 255 255 / .07); --ap-ctl-bg-hover: rgb(255 255 255 / .1); --ap-ctl-bg-active: rgb(255 255 255 / .16); --ap-ctl-bg-disabled: rgb(255 255 255 / .04);
  --ap-ctl-glass-bg: rgb(255 255 255 / .12);
  --ap-ctl-off: rgb(255 255 255 / .1); --ap-ctl-off-active: rgb(255 255 255 / .19);
  --ap-link: #0091FF;
  --ap-prominent: #0091FF; --ap-prominent-hover: #159AFF; --ap-prominent-active: #23A3FF;
  --ap-on-prominent: #000000;
  --ap-tinted: 20%; --ap-tinted-active: 28%; --ap-tinted-disabled: 12%; --ap-destructive-tint: 22%;
  --ap-toggle-on-bg: rgb(0 145 255 / .12);
  --ap-field-bg: #1E1E1E; --ap-field-border: rgb(255 255 255 / .04); --ap-field-bg-disabled: rgb(30 30 30 / .5);
  --ap-focus-ring: 0 0 0 3.5px rgb(0 145 255 / .3), 0 0 0 1px rgb(0 145 255 / .2);
  --ap-field-focus: 0 0 0 3.5px rgb(0 145 255 / .5);
  --ap-knob: #FFFFFF; --ap-knob-shadow: 0 .5px 6px rgb(0 0 0 / .3); --ap-switch-knob-shadow: 0 0 4px rgb(0 0 0 / .2), 0 0 1px rgb(0 0 0 / .3);
  --ap-progress-track: rgb(255 255 255 / .1); --ap-progress-border: rgb(255 255 255 / .05); --ap-tick: rgb(255 255 255 / .25);
  --ap-scrollbar: rgb(255 255 255 / .5); --ap-spinner: 255 255 255;

  --ap-mat-ultrathick: rgb(44 44 44 / .82); --ap-mat-thick: rgb(44 44 44 / .71); --ap-mat-regular: rgb(44 44 44 / .61);
  --ap-mat-thin: rgb(41 41 41 / .49); --ap-mat-ultrathin: rgb(41 41 41 / .4);
  --ap-mat-blur: 60px; --ap-mat-sat-thick: 1.9; --ap-mat-sat: 1.9;

  --ap-glass-bg: rgb(40 40 40 / .7); --ap-glass-tint: rgb(255 255 255 / .04); --ap-glass-blur: 30px;
  --ap-glass-menu-bg: rgb(36 36 36 / .6); --ap-glass-menu-blur: 20px;
  --ap-glass-small-bg: rgb(60 60 60 / .55); --ap-glass-small-blur: 12px;
  --ap-glass-rim: inset 0 0 0 .5px rgb(255 255 255 / .16), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 1px rgb(0 0 0 / .3);
  --ap-tooltip-bg: rgb(44 44 44 / .9); --ap-tooltip-text: rgb(255 255 255 / .8);
  --ap-notification-bg: rgb(40 40 40 / .72);

  --ap-sh-window: 0 36px 100px rgb(0 0 0 / .4), 0 0 1px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .2);
  --ap-sh-window-inactive: 0 16px 32px rgb(0 0 0 / .2), 0 0 1px rgb(0 0 0 / .8);
  --ap-sh-panel: 0 16px 33px rgb(0 0 0 / .4), 0 0 1px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .2);
  --ap-sh-menu: 0 4px 24px rgb(0 0 0 / .5), 0 0 0 .5px rgb(0 0 0 / .8);
  --ap-sh-popover: 0 18px 46px rgb(0 0 0 / .5);
  --ap-sh-notification: 0 4px 16px rgb(0 0 0 / .3);
  --ap-sh-tooltip: 0 2px 8px rgb(0 0 0 / .4), 0 0 2px rgb(0 0 0 / .6);
  --ap-sh-glass-small: 0 8px 15px rgb(0 0 0 / .25), 0 0 0 .5px rgb(0 0 0 / .4);
  --ap-traffic-inactive: rgb(255 255 255 / .16);
}
}