/* PDP Design System v0.7 — PDP EcoSystem tokenlari Holat: rasmiy Manba: https://design.pdp.uz/ds/yadro/?brand=ecosystem#tokens Shriftlar: (self-host, SIL OFL; barcha brendlar) Build yaratadi (tools/ecosystem-ds/build.js --project pdp) — qo‘lda tahrirlamang. */ :root { /* Brend ranglari — Figma */ --eco-color-white: #FFFFFF; --eco-color-black: #141414; --eco-color-malachite: #00C508; --eco-color-lime: #BDFF00; --eco-color-lime-light: #B5F500; --eco-color-malachite-button: #00B533; --eco-color-green-done: #00A603; --eco-gradient-stop-1: #F2FFC7; --eco-gradient-stop-2: var(--eco-color-lime); --eco-gradient-stop-3: var(--eco-color-malachite); --eco-gradient-stop-4: var(--eco-color-green-950); --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 22%, var(--eco-gradient-stop-3) 58%, var(--eco-gradient-stop-4) 100%); --eco-color-surface: #F5F5F5; --eco-color-brand-tint: #E9FED8; --eco-color-surface-active: #F7F7F7; --eco-color-surface-hover: #E6E6E6; --eco-color-surface-tertiary: #E6E6E6; --eco-color-surface-raised: #ECECEC; --eco-color-surface-strong: #DCDCDC; /* Yashil · Vivid Malachite — taklif */ --eco-color-green-25: #F6FFF5; --eco-color-green-50: #E7FFE4; --eco-color-green-100: #C6FFC0; --eco-color-green-200: #7EFA77; --eco-color-green-300: #63E95D; --eco-color-green-400: #40D63C; --eco-color-green-500: #00C508; --eco-color-green-600: #02A307; --eco-color-green-700: #048307; --eco-color-green-800: #026503; --eco-color-green-900: #014C02; --eco-color-green-950: #013A04; /* Limon · Bitter Lime — taklif */ --eco-color-lime-25: #FAFFF5; --eco-color-lime-50: #F4FFE6; --eco-color-lime-100: #E5FFC0; --eco-color-lime-200: #CFFF80; --eco-color-lime-300: #BDFF00; --eco-color-lime-400: #AAE506; --eco-color-lime-500: #92C505; --eco-color-lime-600: #78A302; --eco-color-lime-700: #5F8201; --eco-color-lime-800: #476300; --eco-color-lime-900: #354B01; --eco-color-lime-950: #263701; /* Neytral · Black — taklif */ --eco-color-neutral-25: #FBFBFB; --eco-color-neutral-50: #F7F7F7; --eco-color-neutral-100: #F0F0F0; --eco-color-neutral-200: #E1E1E1; --eco-color-neutral-300: #C7C7C7; --eco-color-neutral-400: #9E9E9E; --eco-color-neutral-500: #767676; --eco-color-neutral-600: #5B5B5B; --eco-color-neutral-700: #424242; --eco-color-neutral-800: #2E2E2E; --eco-color-neutral-900: #222222; --eco-color-neutral-950: #141414; /* Xato · Error — taklif */ --eco-color-error-25: #FEF9F8; --eco-color-error-50: #FFF2F0; --eco-color-error-100: #FEE2E0; --eco-color-error-200: #FFC8C3; --eco-color-error-300: #FFA09A; --eco-color-error-400: #FE726E; --eco-color-error-500: #F0484B; --eco-color-error-600: #CC3339; --eco-color-error-700: #AA1E27; --eco-color-error-800: #8A0316; --eco-color-error-900: #6A010E; --eco-color-error-950: #4B0107; /* Ogohlantirish · Warning — taklif */ --eco-color-warning-25: #FEFBF7; --eco-color-warning-50: #FFF5E9; --eco-color-warning-100: #FEEBD3; --eco-color-warning-200: #FFDBAA; --eco-color-warning-300: #FEC675; --eco-color-warning-400: #FFB020; --eco-color-warning-500: #DB9404; --eco-color-warning-600: #B37902; --eco-color-warning-700: #8D5E01; --eco-color-warning-800: #6C4701; --eco-color-warning-900: #543600; --eco-color-warning-950: #392401; /* Shriftlar */ --eco-font-display: "PDP Display", "PDP Display Fallback", system-ui, sans-serif; --eco-font-body: "Inter", "Inter Fallback", system-ui, sans-serif; --eco-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace; --eco-font-display--letter-spacing: -0.04em; /* Matn shkalasi — Untitled UI: font-size, --line-height, --letter-spacing */ --eco-text-xs: 12px; --eco-text-xs--line-height: 18px; --eco-text-sm: 14px; --eco-text-sm--line-height: 20px; --eco-text-md: 16px; --eco-text-md--line-height: 24px; --eco-text-lg: 18px; --eco-text-lg--line-height: 28px; --eco-text-xl: 20px; --eco-text-xl--line-height: 30px; --eco-text-display-xs: 24px; --eco-text-display-xs--line-height: 32px; --eco-text-display-xs--letter-spacing: -0.96px; --eco-text-display-sm: 30px; --eco-text-display-sm--line-height: 38px; --eco-text-display-sm--letter-spacing: -1.2px; --eco-text-display-md: 36px; --eco-text-display-md--line-height: 44px; --eco-text-display-md--letter-spacing: -1.44px; --eco-text-display-lg: 48px; --eco-text-display-lg--line-height: 60px; --eco-text-display-lg--letter-spacing: -1.92px; --eco-text-display-xl: 60px; --eco-text-display-xl--line-height: 72px; --eco-text-display-xl--letter-spacing: -2.4px; --eco-text-display-2xl: 72px; --eco-text-display-2xl--line-height: 90px; --eco-text-display-2xl--letter-spacing: -2.88px; /* Oraliqlar — Untitled UI spacing */ --eco-spacing-none: 0; --eco-spacing-xxs: 2px; --eco-spacing-xs: 4px; --eco-spacing-sm: 6px; --eco-spacing-md: 8px; --eco-spacing-lg: 12px; --eco-spacing-xl: 16px; --eco-spacing-2xl: 20px; --eco-spacing-3xl: 24px; --eco-spacing-4xl: 32px; --eco-spacing-5xl: 40px; --eco-spacing-6xl: 48px; --eco-spacing-7xl: 64px; --eco-spacing-8xl: 80px; --eco-spacing-9xl: 96px; --eco-spacing-10xl: 128px; --eco-spacing-11xl: 160px; /* Burchaklar — Untitled UI radius */ --eco-radius-none: 0; --eco-radius-xxs: 2px; --eco-radius-xs: 4px; --eco-radius-sm: 6px; --eco-radius-md: 8px; --eco-radius-lg: 10px; --eco-radius-xl: 12px; --eco-radius-2xl: 16px; --eco-radius-3xl: 20px; --eco-radius-4xl: 24px; --eco-radius-full: 9999px; --eco-max-width-container: 1280px; /* Ikonka va harakat — EcoSystem */ --eco-icon-sm: 16px; --eco-icon-md: 20px; --eco-icon-lg: 24px; --eco-duration-fast: 120ms; --eco-duration-base: 200ms; --eco-duration-slow: 360ms; --eco-ease-standard: cubic-bezier(.2, 0, 0, 1); --eco-ease-emphasized: cubic-bezier(.2, .7, .2, 1); --eco-ease-exit: cubic-bezier(.4, 0, 1, 1); /* Logotip: X = belgi / 9 */ --eco-logo-mark-size: 40px; --eco-logo-x: calc(var(--eco-logo-mark-size) / 9); --eco-logo-clearspace: var(--eco-logo-x); --eco-logo-min-full: 120px; --eco-logo-min-mark: 16px; --eco-logo-min-badge: 64px; /* Semantik — qorong‘i rejim (:root standarti; mahsulotda yorug‘ asosiy) */ --eco-text-primary: var(--eco-color-neutral-50); --eco-text-secondary: var(--eco-color-neutral-200); --eco-text-secondary_hover: var(--eco-color-neutral-100); --eco-text-tertiary: var(--eco-color-neutral-400); --eco-text-tertiary_hover: var(--eco-color-neutral-300); --eco-text-quaternary: var(--eco-color-neutral-400); --eco-text-placeholder: var(--eco-color-neutral-400); --eco-text-disabled: var(--eco-color-neutral-600); --eco-text-white: var(--eco-color-white); --eco-text-primary_on-brand: var(--eco-color-black); --eco-text-brand-primary: var(--eco-color-lime); --eco-text-brand-secondary: var(--eco-color-lime); --eco-text-brand-secondary_hover: var(--eco-color-lime-200); --eco-text-brand-tertiary: var(--eco-color-malachite); --eco-text-error-primary: var(--eco-color-error-400); --eco-text-error-primary_hover: var(--eco-color-error-300); --eco-text-warning-primary: #FFCC19; --eco-text-success-primary: var(--eco-color-green-300); --eco-border-primary: var(--eco-color-neutral-500); --eco-border-secondary: rgba(245, 245, 245, .26); --eco-border-tertiary: rgba(245, 245, 245, .14); --eco-border-disabled: var(--eco-color-neutral-700); --eco-border-brand: var(--eco-color-lime); --eco-border-error: var(--eco-color-error-400); --eco-border-error_subtle: var(--eco-color-error-500); --eco-fg-primary: var(--eco-color-neutral-50); --eco-fg-secondary: var(--eco-color-neutral-200); --eco-fg-tertiary: var(--eco-color-neutral-400); --eco-fg-quaternary: var(--eco-color-neutral-500); --eco-fg-quaternary_hover: var(--eco-color-neutral-400); --eco-fg-white: var(--eco-color-white); --eco-fg-disabled: var(--eco-color-neutral-600); --eco-fg-brand-primary: var(--eco-color-lime); --eco-fg-brand-primary_alt: var(--eco-color-lime); --eco-fg-brand-secondary: var(--eco-color-malachite); --eco-fg-error-primary: var(--eco-color-error-400); --eco-fg-error-secondary: var(--eco-color-error-500); --eco-fg-warning-primary: #FFCC19; --eco-fg-info-primary: #5B92FF; --eco-fg-success-primary: var(--eco-color-malachite); --eco-fg-success-secondary: var(--eco-color-green-400); --eco-bg-primary: var(--eco-color-black); --eco-bg-primary_alt: var(--eco-color-neutral-800); --eco-bg-primary_hover: var(--eco-color-neutral-900); --eco-bg-primary-solid: var(--eco-color-neutral-700); --eco-bg-secondary: var(--eco-color-neutral-900); --eco-bg-secondary_hover: var(--eco-color-neutral-800); --eco-bg-tertiary: var(--eco-color-neutral-800); --eco-bg-quaternary: var(--eco-color-neutral-700); --eco-bg-active: var(--eco-color-neutral-800); --eco-bg-disabled: var(--eco-color-neutral-800); --eco-bg-overlay: rgba(0, 0, 0, .64); --eco-bg-brand-primary: rgba(189, 255, 0, .10); --eco-bg-brand-secondary: rgba(189, 255, 0, .18); --eco-bg-brand-solid: var(--eco-color-lime); --eco-bg-brand-solid_hover: var(--eco-color-lime-200); --eco-bg-error-primary: rgba(240, 72, 75, .16); --eco-bg-error-secondary: rgba(240, 72, 75, .26); --eco-bg-error-solid: var(--eco-color-error-600); --eco-bg-error-solid_hover: var(--eco-color-error-700); --eco-bg-warning-primary: rgba(255, 176, 32, .16); --eco-bg-warning-solid: var(--eco-color-warning-400); --eco-bg-success-primary: rgba(0, 197, 8, .16); --eco-bg-success-solid: var(--eco-color-malachite-button); --eco-focus-ring: var(--eco-color-lime); --eco-focus-ring-error: var(--eco-color-error-400); --eco-chart-1: var(--eco-color-lime); --eco-chart-seq-1: var(--eco-color-green-900); --eco-chart-seq-2: var(--eco-color-green-700); --eco-chart-seq-3: var(--eco-color-malachite); --eco-chart-seq-4: var(--eco-color-green-300); --eco-chart-seq-5: var(--eco-color-lime); --eco-chart-div-1: var(--eco-color-error-600); --eco-chart-div-2: var(--eco-color-error-400); --eco-chart-div-3: var(--eco-color-neutral-800); --eco-chart-div-4: var(--eco-color-green-400); --eco-chart-div-5: var(--eco-color-green-700); --eco-project-academy: var(--eco-color-malachite); --eco-project-school: #3777FF; --eco-project-junior: #00E0EF; --eco-project-university: #26A49D; --eco-project-online: #FFCC19; --eco-cat-black: var(--eco-text-primary); --eco-cat-green: #39AB37; --eco-cat-blue: var(--eco-color-green-400); --eco-cat-teal: var(--eco-color-neutral-300); --eco-cat-red: var(--eco-color-lime); --eco-board-1: var(--eco-color-malachite-button); --eco-board-2: var(--eco-color-neutral-100); --eco-board-3: var(--eco-color-neutral-400); --eco-board-4: var(--eco-color-green-300); --eco-board-5: var(--eco-color-green-700); --eco-board-6: var(--eco-color-lime); --eco-board-ink-1: var(--eco-color-white); --eco-board-ink-2: var(--eco-color-black); --eco-board-ink-3: var(--eco-color-black); --eco-board-ink-4: var(--eco-color-black); --eco-board-ink-5: var(--eco-color-white); --eco-board-ink-6: var(--eco-color-black); --eco-aurora-1: #7B07FF; --eco-aurora-2: #308AFF; --eco-aurora-2-deep: #0617FF; --eco-aurora-3: #FFCD07; --eco-aurora-4: #FF07EE; --eco-aurora-ring: #FF282B; --eco-aurora-line: #293054; --eco-rainbow-1: #FF4242; --eco-rainbow-2: #FF8A3D; --eco-rainbow-3: #FFCC19; --eco-rainbow-4: #00B533; --eco-rainbow-5: #A0FF42; --eco-rainbow-c2: #A142FE; --eco-rainbow-c3: #40A1FF; --eco-rainbow-c4: #43D0FF; --eco-glass-fill: color-mix(in srgb, var(--eco-color-black) 20%, transparent); --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-black) 32%, transparent); --eco-glass-backdrop: blur(3px) brightness(1.25); --eco-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--eco-color-white) 60%, transparent), color-mix(in srgb, var(--eco-color-white) 10%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-white) 8%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 32%, transparent)); --eco-glass-ink: var(--eco-color-white); --eco-glass-solid: var(--eco-color-black); --eco-illo-ground: var(--eco-color-neutral-900); --eco-illo-base: var(--eco-color-neutral-800); --eco-illo-shade: var(--eco-color-neutral-600); --eco-illo-ink: var(--eco-color-neutral-100); --eco-illo-accent: var(--eco-brand-accent); --eco-illo-on-accent: var(--eco-color-white); --eco-illo-on-ink: var(--eco-color-neutral-900); --eco-illo-spark: var(--eco-brand-button); --eco-illo-alert: var(--eco-color-error-400); --eco-illo-base-on-grey: var(--eco-color-neutral-700); --eco-illo-shade-on-grey: var(--eco-color-neutral-500); --eco-illo-ground-on-grey: var(--eco-color-black); --eco-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --eco-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --eco-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.24); --eco-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.32), 0 4px 6px -2px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.16); --eco-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.32), 0 8px 8px -4px rgba(0, 0, 0, 0.12), 0 3px 3px -1.5px rgba(0, 0, 0, 0.16); --eco-shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.72), 0 4px 4px -2px rgba(0, 0, 0, 0.16); --eco-shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.56), 0 5px 5px -2.5px rgba(0, 0, 0, 0.16); --eco-shadow-xs-skeuomorphic: inset 0 0 0 1px rgba(0, 0, 0, 0.72), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); --eco-chart-2: var(--eco-color-neutral-100); --eco-chart-3: var(--eco-color-malachite); --eco-chart-4: var(--eco-color-neutral-500); --eco-chart-5: var(--eco-color-neutral-300); --eco-chart-6: var(--eco-color-neutral-700); } [data-theme="dark"] { /* Qorong‘i bo‘lim yorug‘ sahifa ichida */ --eco-text-primary: var(--eco-color-neutral-50); --eco-text-secondary: var(--eco-color-neutral-200); --eco-text-secondary_hover: var(--eco-color-neutral-100); --eco-text-tertiary: var(--eco-color-neutral-400); --eco-text-tertiary_hover: var(--eco-color-neutral-300); --eco-text-quaternary: var(--eco-color-neutral-400); --eco-text-placeholder: var(--eco-color-neutral-400); --eco-text-disabled: var(--eco-color-neutral-600); --eco-text-white: var(--eco-color-white); --eco-text-primary_on-brand: var(--eco-color-black); --eco-text-brand-primary: var(--eco-color-lime); --eco-text-brand-secondary: var(--eco-color-lime); --eco-text-brand-secondary_hover: var(--eco-color-lime-200); --eco-text-brand-tertiary: var(--eco-color-malachite); --eco-text-error-primary: var(--eco-color-error-400); --eco-text-error-primary_hover: var(--eco-color-error-300); --eco-text-warning-primary: #FFCC19; --eco-text-success-primary: var(--eco-color-green-300); --eco-border-primary: var(--eco-color-neutral-500); --eco-border-secondary: rgba(245, 245, 245, .26); --eco-border-tertiary: rgba(245, 245, 245, .14); --eco-border-disabled: var(--eco-color-neutral-700); --eco-border-brand: var(--eco-color-lime); --eco-border-error: var(--eco-color-error-400); --eco-border-error_subtle: var(--eco-color-error-500); --eco-fg-primary: var(--eco-color-neutral-50); --eco-fg-secondary: var(--eco-color-neutral-200); --eco-fg-tertiary: var(--eco-color-neutral-400); --eco-fg-quaternary: var(--eco-color-neutral-500); --eco-fg-quaternary_hover: var(--eco-color-neutral-400); --eco-fg-white: var(--eco-color-white); --eco-fg-disabled: var(--eco-color-neutral-600); --eco-fg-brand-primary: var(--eco-color-lime); --eco-fg-brand-primary_alt: var(--eco-color-lime); --eco-fg-brand-secondary: var(--eco-color-malachite); --eco-fg-error-primary: var(--eco-color-error-400); --eco-fg-error-secondary: var(--eco-color-error-500); --eco-fg-warning-primary: #FFCC19; --eco-fg-info-primary: #5B92FF; --eco-fg-success-primary: var(--eco-color-malachite); --eco-fg-success-secondary: var(--eco-color-green-400); --eco-bg-primary: var(--eco-color-black); --eco-bg-primary_alt: var(--eco-color-neutral-800); --eco-bg-primary_hover: var(--eco-color-neutral-900); --eco-bg-primary-solid: var(--eco-color-neutral-700); --eco-bg-secondary: var(--eco-color-neutral-900); --eco-bg-secondary_hover: var(--eco-color-neutral-800); --eco-bg-tertiary: var(--eco-color-neutral-800); --eco-bg-quaternary: var(--eco-color-neutral-700); --eco-bg-active: var(--eco-color-neutral-800); --eco-bg-disabled: var(--eco-color-neutral-800); --eco-bg-overlay: rgba(0, 0, 0, .64); --eco-bg-brand-primary: rgba(189, 255, 0, .10); --eco-bg-brand-secondary: rgba(189, 255, 0, .18); --eco-bg-brand-solid: var(--eco-color-lime); --eco-bg-brand-solid_hover: var(--eco-color-lime-200); --eco-bg-error-primary: rgba(240, 72, 75, .16); --eco-bg-error-secondary: rgba(240, 72, 75, .26); --eco-bg-error-solid: var(--eco-color-error-600); --eco-bg-error-solid_hover: var(--eco-color-error-700); --eco-bg-warning-primary: rgba(255, 176, 32, .16); --eco-bg-warning-solid: var(--eco-color-warning-400); --eco-bg-success-primary: rgba(0, 197, 8, .16); --eco-bg-success-solid: var(--eco-color-malachite-button); --eco-focus-ring: var(--eco-color-lime); --eco-focus-ring-error: var(--eco-color-error-400); --eco-chart-1: var(--eco-color-lime); --eco-chart-seq-1: var(--eco-color-green-900); --eco-chart-seq-2: var(--eco-color-green-700); --eco-chart-seq-3: var(--eco-color-malachite); --eco-chart-seq-4: var(--eco-color-green-300); --eco-chart-seq-5: var(--eco-color-lime); --eco-chart-div-1: var(--eco-color-error-600); --eco-chart-div-2: var(--eco-color-error-400); --eco-chart-div-3: var(--eco-color-neutral-800); --eco-chart-div-4: var(--eco-color-green-400); --eco-chart-div-5: var(--eco-color-green-700); --eco-project-academy: var(--eco-color-malachite); --eco-project-school: #3777FF; --eco-project-junior: #00E0EF; --eco-project-university: #26A49D; --eco-project-online: #FFCC19; --eco-cat-black: var(--eco-text-primary); --eco-cat-green: #39AB37; --eco-cat-blue: var(--eco-color-green-400); --eco-cat-teal: var(--eco-color-neutral-300); --eco-cat-red: var(--eco-color-lime); --eco-board-1: var(--eco-color-malachite-button); --eco-board-2: var(--eco-color-neutral-100); --eco-board-3: var(--eco-color-neutral-400); --eco-board-4: var(--eco-color-green-300); --eco-board-5: var(--eco-color-green-700); --eco-board-6: var(--eco-color-lime); --eco-board-ink-1: var(--eco-color-white); --eco-board-ink-2: var(--eco-color-black); --eco-board-ink-3: var(--eco-color-black); --eco-board-ink-4: var(--eco-color-black); --eco-board-ink-5: var(--eco-color-white); --eco-board-ink-6: var(--eco-color-black); --eco-aurora-1: #7B07FF; --eco-aurora-2: #308AFF; --eco-aurora-2-deep: #0617FF; --eco-aurora-3: #FFCD07; --eco-aurora-4: #FF07EE; --eco-aurora-ring: #FF282B; --eco-aurora-line: #293054; --eco-rainbow-1: #FF4242; --eco-rainbow-2: #FF8A3D; --eco-rainbow-3: #FFCC19; --eco-rainbow-4: #00B533; --eco-rainbow-5: #A0FF42; --eco-rainbow-c2: #A142FE; --eco-rainbow-c3: #40A1FF; --eco-rainbow-c4: #43D0FF; --eco-glass-fill: color-mix(in srgb, var(--eco-color-black) 20%, transparent); --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-black) 32%, transparent); --eco-glass-backdrop: blur(3px) brightness(1.25); --eco-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--eco-color-white) 60%, transparent), color-mix(in srgb, var(--eco-color-white) 10%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-white) 8%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 32%, transparent)); --eco-glass-ink: var(--eco-color-white); --eco-glass-solid: var(--eco-color-black); --eco-illo-ground: var(--eco-color-neutral-900); --eco-illo-base: var(--eco-color-neutral-800); --eco-illo-shade: var(--eco-color-neutral-600); --eco-illo-ink: var(--eco-color-neutral-100); --eco-illo-accent: var(--eco-brand-accent); --eco-illo-on-accent: var(--eco-color-white); --eco-illo-on-ink: var(--eco-color-neutral-900); --eco-illo-spark: var(--eco-brand-button); --eco-illo-alert: var(--eco-color-error-400); --eco-illo-base-on-grey: var(--eco-color-neutral-700); --eco-illo-shade-on-grey: var(--eco-color-neutral-500); --eco-illo-ground-on-grey: var(--eco-color-black); --eco-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --eco-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --eco-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.24); --eco-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.32), 0 4px 6px -2px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.16); --eco-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.32), 0 8px 8px -4px rgba(0, 0, 0, 0.12), 0 3px 3px -1.5px rgba(0, 0, 0, 0.16); --eco-shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.72), 0 4px 4px -2px rgba(0, 0, 0, 0.16); --eco-shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.56), 0 5px 5px -2.5px rgba(0, 0, 0, 0.16); --eco-shadow-xs-skeuomorphic: inset 0 0 0 1px rgba(0, 0, 0, 0.72), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); --eco-chart-2: var(--eco-color-neutral-100); --eco-chart-3: var(--eco-color-malachite); --eco-chart-4: var(--eco-color-neutral-500); --eco-chart-5: var(--eco-color-neutral-300); --eco-chart-6: var(--eco-color-neutral-700); } [data-theme="light"] { /* Semantik — yorug‘ rejim */ --eco-text-primary: var(--eco-color-black); --eco-text-secondary: var(--eco-color-neutral-700); --eco-text-secondary_hover: var(--eco-color-neutral-800); --eco-text-tertiary: var(--eco-color-neutral-600); --eco-text-tertiary_hover: var(--eco-color-neutral-700); --eco-text-quaternary: var(--eco-color-neutral-500); --eco-text-placeholder: var(--eco-color-neutral-500); --eco-text-disabled: var(--eco-color-neutral-500); --eco-text-white: var(--eco-color-white); --eco-text-primary_on-brand: var(--eco-color-white); --eco-text-brand-primary: var(--eco-color-green-done); --eco-text-brand-secondary: var(--eco-color-green-done); --eco-text-brand-secondary_hover: var(--eco-color-green-900); --eco-text-brand-tertiary: var(--eco-color-green-done); --eco-text-error-primary: var(--eco-color-error-600); --eco-text-error-primary_hover: var(--eco-color-error-700); --eco-text-warning-primary: #D39F31; --eco-text-success-primary: var(--eco-color-green-800); --eco-border-primary: var(--eco-color-neutral-500); --eco-border-secondary: rgba(20, 20, 20, .26); --eco-border-tertiary: rgba(20, 20, 20, .14); --eco-border-disabled: var(--eco-color-neutral-300); --eco-border-brand: var(--eco-color-green-700); --eco-border-error: var(--eco-color-error-600); --eco-border-error_subtle: var(--eco-color-error-500); --eco-fg-primary: var(--eco-color-black); --eco-fg-secondary: var(--eco-color-neutral-700); --eco-fg-tertiary: var(--eco-color-neutral-600); --eco-fg-quaternary: var(--eco-color-neutral-500); --eco-fg-quaternary_hover: var(--eco-color-neutral-600); --eco-fg-white: var(--eco-color-white); --eco-fg-disabled: var(--eco-color-neutral-400); --eco-fg-brand-primary: var(--eco-color-green-700); --eco-fg-brand-primary_alt: var(--eco-color-malachite); --eco-fg-brand-secondary: var(--eco-color-malachite); --eco-fg-error-primary: var(--eco-color-error-600); --eco-fg-error-secondary: var(--eco-color-error-500); --eco-fg-warning-primary: #D39F31; --eco-fg-info-primary: #0055FF; --eco-fg-success-primary: var(--eco-color-green-700); --eco-fg-success-secondary: var(--eco-color-malachite); --eco-bg-primary: var(--eco-color-white); --eco-bg-primary_alt: var(--eco-color-white); --eco-bg-primary_hover: var(--eco-color-surface-active); --eco-bg-primary-solid: var(--eco-color-black); --eco-bg-secondary: var(--eco-color-surface); --eco-bg-secondary_hover: var(--eco-color-surface-hover); --eco-bg-tertiary: var(--eco-color-surface-tertiary); --eco-bg-quaternary: var(--eco-color-neutral-300); --eco-bg-active: var(--eco-color-surface-active); --eco-bg-disabled: var(--eco-color-surface); --eco-bg-overlay: rgba(20, 20, 20, .48); --eco-bg-brand-primary: var(--eco-color-brand-tint); --eco-bg-brand-secondary: var(--eco-color-green-100); --eco-bg-brand-solid: var(--eco-color-malachite-button); --eco-bg-brand-solid_hover: var(--eco-color-green-600); --eco-bg-error-primary: var(--eco-color-error-50); --eco-bg-error-secondary: var(--eco-color-error-100); --eco-bg-error-solid: var(--eco-color-error-600); --eco-bg-error-solid_hover: var(--eco-color-error-700); --eco-bg-warning-primary: var(--eco-color-warning-50); --eco-bg-warning-solid: var(--eco-color-warning-400); --eco-bg-success-primary: var(--eco-color-green-50); --eco-bg-success-solid: var(--eco-color-malachite-button); --eco-focus-ring: var(--eco-color-green-700); --eco-focus-ring-error: var(--eco-color-error-600); --eco-chart-1: var(--eco-color-malachite-button); --eco-chart-seq-1: var(--eco-color-lime-100); --eco-chart-seq-2: var(--eco-color-lime); --eco-chart-seq-3: var(--eco-color-malachite-button); --eco-chart-seq-4: var(--eco-color-green-800); --eco-chart-seq-5: var(--eco-color-green-950); --eco-chart-div-1: var(--eco-color-error-700); --eco-chart-div-2: var(--eco-color-error-400); --eco-chart-div-3: var(--eco-color-surface); --eco-chart-div-4: var(--eco-color-green-400); --eco-chart-div-5: var(--eco-color-green-700); --eco-project-academy: var(--eco-color-green-600); --eco-project-school: #0019FF; --eco-project-junior: #00E0EF; --eco-project-university: #26A49D; --eco-project-online: #FFCC19; --eco-cat-black: var(--eco-text-primary); --eco-cat-green: #00A603; --eco-cat-blue: var(--eco-color-green-950); --eco-cat-teal: var(--eco-color-neutral-500); --eco-cat-red: var(--eco-color-lime-800); --eco-board-1: var(--eco-color-malachite-button); --eco-board-2: var(--eco-color-neutral-900); --eco-board-3: var(--eco-color-neutral-400); --eco-board-4: var(--eco-color-green-300); --eco-board-5: var(--eco-color-green-800); --eco-board-6: var(--eco-color-lime); --eco-board-ink-1: var(--eco-color-white); --eco-board-ink-2: var(--eco-color-white); --eco-board-ink-3: var(--eco-color-black); --eco-board-ink-4: var(--eco-color-black); --eco-board-ink-5: var(--eco-color-white); --eco-board-ink-6: var(--eco-color-black); --eco-aurora-1: #7B07FF; --eco-aurora-2: #308AFF; --eco-aurora-2-deep: #0617FF; --eco-aurora-3: #FFCD07; --eco-aurora-4: #FF07EE; --eco-aurora-ring: #FF282B; --eco-aurora-line: #293054; --eco-rainbow-1: #FF4242; --eco-rainbow-2: #FF8A3D; --eco-rainbow-3: #FFCC19; --eco-rainbow-4: #00B533; --eco-rainbow-5: #A0FF42; --eco-rainbow-c2: #A142FE; --eco-rainbow-c3: #40A1FF; --eco-rainbow-c4: #43D0FF; --eco-glass-fill: color-mix(in srgb, var(--eco-color-white) 40%, transparent); --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-white) 58%, transparent); --eco-glass-backdrop: blur(3px) brightness(1.06); --eco-glass-rim: linear-gradient(135deg, var(--eco-color-white), color-mix(in srgb, var(--eco-color-white) 50%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-black) 5%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 80%, transparent)); --eco-glass-ink: var(--eco-color-black); --eco-glass-solid: color-mix(in srgb, var(--eco-color-white) 86%, transparent); --eco-illo-ground: var(--eco-color-neutral-100); --eco-illo-base: var(--eco-color-surface-tertiary); --eco-illo-shade: var(--eco-color-neutral-300); --eco-illo-ink: var(--eco-color-neutral-900); --eco-illo-accent: var(--eco-brand-button); --eco-illo-on-accent: var(--eco-color-white); --eco-illo-on-ink: var(--eco-color-white); --eco-illo-spark: var(--eco-brand-button); --eco-illo-alert: var(--eco-color-error-600); --eco-illo-base-on-grey: var(--eco-color-white); --eco-illo-shade-on-grey: var(--eco-color-neutral-300); --eco-illo-ground-on-grey: var(--eco-color-surface-tertiary); --eco-shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.05); --eco-shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.1), 0 1px 2px -1px rgba(20, 20, 20, 0.1); --eco-shadow-md: 0 4px 6px -1px rgba(20, 20, 20, 0.1), 0 2px 4px -2px rgba(20, 20, 20, 0.06); --eco-shadow-lg: 0 12px 16px -4px rgba(20, 20, 20, 0.08), 0 4px 6px -2px rgba(20, 20, 20, 0.03), 0 2px 2px -1px rgba(20, 20, 20, 0.04); --eco-shadow-xl: 0 20px 24px -4px rgba(20, 20, 20, 0.08), 0 8px 8px -4px rgba(20, 20, 20, 0.03), 0 3px 3px -1.5px rgba(20, 20, 20, 0.04); --eco-shadow-2xl: 0 24px 48px -12px rgba(20, 20, 20, 0.18), 0 4px 4px -2px rgba(20, 20, 20, 0.04); --eco-shadow-3xl: 0 32px 64px -12px rgba(20, 20, 20, 0.14), 0 5px 5px -2.5px rgba(20, 20, 20, 0.04); --eco-shadow-xs-skeuomorphic: inset 0 0 0 1px rgba(20, 20, 20, 0.18), inset 0 -2px 0 0 rgba(20, 20, 20, 0.05), 0 1px 2px rgba(20, 20, 20, 0.05); --eco-chart-2: var(--eco-color-neutral-900); --eco-chart-3: var(--eco-color-lime-light); --eco-chart-4: var(--eco-color-neutral-500); --eco-chart-5: var(--eco-color-neutral-300); --eco-chart-6: var(--eco-color-brand-tint); } .eco-glass--dark { --eco-glass-fill: color-mix(in srgb, var(--eco-color-black) 20%, transparent); --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-black) 32%, transparent); --eco-glass-backdrop: blur(3px) brightness(1.25); --eco-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--eco-color-white) 60%, transparent), color-mix(in srgb, var(--eco-color-white) 10%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-white) 8%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 32%, transparent)); --eco-glass-ink: var(--eco-color-white); --eco-glass-solid: var(--eco-color-black); } .eco-glass--light { --eco-glass-fill: color-mix(in srgb, var(--eco-color-white) 40%, transparent); --eco-glass-fill-hover: color-mix(in srgb, var(--eco-color-white) 58%, transparent); --eco-glass-backdrop: blur(3px) brightness(1.06); --eco-glass-rim: linear-gradient(135deg, var(--eco-color-white), color-mix(in srgb, var(--eco-color-white) 50%, transparent) 30%, transparent 50%, color-mix(in srgb, var(--eco-color-black) 5%, transparent) 72%, color-mix(in srgb, var(--eco-color-white) 80%, transparent)); --eco-glass-ink: var(--eco-color-black); --eco-glass-solid: color-mix(in srgb, var(--eco-color-white) 86%, transparent); } /* Brend taxalluslari va komponent tokenlari («Yangi» beyji, avatar) — rejimga bog‘liq */ :root, [data-theme="dark"] { --eco-brand-primary: var(--eco-color-lime); --eco-brand-on-primary: var(--eco-color-black); --eco-brand-accent: var(--eco-color-malachite-button); --eco-brand-on-accent: var(--eco-color-white); --eco-brand-button: var(--eco-color-lime); --eco-brand-on-button: var(--eco-color-black); --eco-brand-button-accent: var(--eco-color-malachite-button); --eco-brand-on-button-accent: var(--eco-color-white); --eco-brand-button-ink: var(--eco-color-neutral-50); --eco-brand-on-button-ink: var(--eco-color-black); --eco-brand-button-secondary-fg: var(--eco-color-green-400); --eco-brand-button-secondary-fg_hover: var(--eco-color-green-300); --eco-badge-solid-bg: var(--eco-bg-brand-solid); --eco-badge-solid-fg: var(--eco-text-primary_on-brand); --eco-btn-accent-hover-to: var(--eco-color-black); --eco-tab-label: rgba(255, 255, 255, .7); --eco-tab-label-strong: var(--eco-color-white); --eco-tab-pill-bg: var(--eco-color-white); --eco-tab-pill-fg: #000000; --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06); --eco-tab-inverse-bg: #000000; --eco-tab-inverse-fg: var(--eco-color-white); --eco-tab-brand-bg: var(--eco-color-malachite-button); --eco-tab-brand-fg: var(--eco-color-white); --eco-tab-accent-bg: var(--eco-color-lime); --eco-tab-accent-fg: #000000; --eco-slider-fill: var(--eco-color-malachite-button); --eco-slider-mark: var(--eco-color-white); --eco-avatar-ink: var(--eco-color-lime); --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary)); --eco-avatar-tint-ink: var(--eco-color-lime); --eco-avatar-ink-black: var(--eco-text-primary); --eco-avatar-ink-green: #39AB37; --eco-avatar-ink-blue: #5B92FF; --eco-avatar-ink-teal: #61C5BD; --eco-avatar-ink-red: #FF604F; --eco-avatar-accent-bg: color-mix(in srgb, var(--eco-color-lime) 50%, var(--eco-color-white)); --eco-avatar-accent-ink: var(--eco-color-malachite-button); --eco-avatar-inverse-bg: #1F1F1F; --eco-avatar-inverse-ink: var(--eco-color-lime); --eco-avatar-solid-bg: var(--eco-color-malachite); --eco-avatar-solid-ink: #1D63AE; } [data-theme="light"] { --eco-brand-primary: var(--eco-color-malachite-button); --eco-brand-on-primary: var(--eco-color-white); --eco-brand-accent: var(--eco-color-lime-light); --eco-brand-on-accent: var(--eco-color-black); --eco-brand-button: var(--eco-color-malachite-button); --eco-brand-on-button: var(--eco-color-white); --eco-brand-button-accent: var(--eco-color-lime-light); --eco-brand-on-button-accent: var(--eco-color-black); --eco-brand-button-ink: var(--eco-color-black); --eco-brand-on-button-ink: var(--eco-color-white); --eco-brand-button-secondary-fg: var(--eco-color-green-800); --eco-brand-button-secondary-fg_hover: var(--eco-color-green-900); --eco-badge-solid-bg: var(--eco-bg-brand-solid); --eco-badge-solid-fg: var(--eco-text-primary_on-brand); --eco-btn-hover-to: var(--eco-color-black); --eco-tab-label: rgba(0, 0, 0, .7); --eco-tab-label-strong: #000000; --eco-tab-pill-bg: var(--eco-color-white); --eco-tab-pill-fg: #000000; --eco-tab-pill-shadow: 0 2px 8px rgba(0, 0, 0, .06); --eco-tab-inverse-bg: #000000; --eco-tab-inverse-fg: var(--eco-color-white); --eco-tab-brand-bg: var(--eco-color-malachite-button); --eco-tab-brand-fg: var(--eco-color-white); --eco-tab-accent-bg: var(--eco-color-lime); --eco-tab-accent-fg: #000000; --eco-slider-fill: var(--eco-color-malachite-button); --eco-slider-mark: var(--eco-color-white); --eco-avatar-ink: var(--eco-color-malachite-button); --eco-avatar-tint-bg: color-mix(in srgb, var(--eco-color-malachite) 15%, var(--eco-bg-primary)); --eco-avatar-tint-ink: var(--eco-color-malachite-button); --eco-avatar-ink-black: var(--eco-text-primary); --eco-avatar-ink-green: #00A603; --eco-avatar-ink-blue: #0055FF; --eco-avatar-ink-teal: #26A49D; --eco-avatar-ink-red: #C80000; --eco-avatar-accent-bg: color-mix(in srgb, var(--eco-color-lime) 50%, var(--eco-color-white)); --eco-avatar-accent-ink: var(--eco-color-malachite-button); --eco-avatar-inverse-bg: #1F1F1F; --eco-avatar-inverse-ink: var(--eco-color-lime); --eco-avatar-solid-bg: var(--eco-color-malachite); --eco-avatar-solid-ink: #1D63AE; } /* Bosma hujjatlar — A4, pt shkala (/ds/ #print bo‘limi) */ :root { --eco-print-page-width: 210mm; --eco-print-page-height: 297mm; --eco-print-margin-top: 30mm; --eco-print-margin-bottom: 17mm; --eco-print-margin-x: 17mm; --eco-print-header-top: 5.3mm; --eco-print-footer-bottom: 5mm; --eco-print-body-size: 10pt; --eco-print-body-leading: 1.5; --eco-print-body-weight: 400; --eco-print-strong-weight: 700; --eco-print-section-weight: 700; --eco-print-caps-weight: 700; --eco-print-first-col-weight: 600; --eco-print-card-size: 9.5pt; --eco-print-card-leading: 1.42; --eco-print-table-size: 9pt; --eco-print-table-leading: 1.42; --eco-print-meta-size: 9pt; --eco-print-meta-weight: 500; --eco-print-label-size: 7.5pt; --eco-print-th-size: 7pt; --eco-print-caps-tracking: .12em; --eco-print-head-size: 7pt; --eco-print-head-mark: 12px; --eco-print-notice-size: 6.5pt; --eco-print-title-sop: 25pt; --eco-print-title-sop-tracking: -.035em; --eco-print-title-card: 22pt; --eco-print-section-title: 15pt; --eco-print-section-tracking: -.03em; --eco-print-num-size: 12pt; --eco-print-num-tile: 9mm; --eco-print-num-radius: 2.2mm; --eco-print-rule-height: 4px; --eco-print-th-rule: 1.5px; --eco-print-row-height: 18pt; --eco-print-panel-title: 13pt; --eco-print-step-title: 11pt; --eco-print-icon-tile: 7.4mm; --eco-print-icon: 4.4mm; --eco-print-step-rise: 10mm; --eco-print-step-base: 52mm; --eco-print-sign-row: 13mm; --eco-print-font: "Inter", "DejaVu Sans", sans-serif; --eco-print-title-weight: 700; --eco-print-rule-fill: var(--eco-color-malachite-button); }