:root {
  --color-bg:            #f3f3f3;
  --color-surface:       #ffffff;
  --color-text:          #222222;
  --color-text-muted:    #888888;
  --color-chip-bg:       #f8f7f7;
  --color-focus:         #222222;

  --color-lift:          #ffffff;
  --color-border-hover:  #e2e0e0;
  --color-cover-hover:   #efeded;
  --color-bullet:        #1a7f4b;
  --color-accent:        #222222;
  --color-accent-text:   #ffffff;
  --color-accent-hover:  #000000;

  --font-family: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    600;

  --font-size-caption:   14px;
  --font-size-body:      16px;
  --font-size-section:   18px;
  --font-size-name:      24px;
  --font-size-headline:  20px;
  --font-size-salary:    24px;

  --line-height-caption:  21px;
  --line-height-body:     23px;
  --line-height-value:    24px;
  --line-height-name:     31px;
  --line-height-headline: 26px;
  --line-height-salary:   31px;

  --optical-caption:  20;
  --optical-body:     24;
  --optical-section:  26;
  --optical-name:     32;
  --optical-headline: 28;
  --optical-salary:   32;

  --layout-width:    800px;
  --layout-aside:    160px;
  --layout-gutter:    24px;
  --page-padding-y:   24px;

  --card-padding: 20px;
  --card-radius:  24px;
  --card-gap:      4px;

  --avatar-size:       160px;
  --avatar-photo-size: 140px;

  --chip-radius:      12px;
  --chip-padding-y:    6px;
  --chip-padding-x:   10px;
  --chip-gap:          4px;

  --marquee-speed:     62;
  --marquee-duration:  55s;
  --marquee-gap:       40px;
  --marquee-radius:    12px;
  --marquee-padding:    7px;
  --marquee-font-size: 14px;
  --marquee-line:      20px;
  --marquee-fade:      72px;

  --gap-label-value:   3px;
  --gap-links:         4px;
  --gap-field:        14px;
  --gap-about:         5px;
  --gap-meta:          6px;
  --gap-headline:      9px;
  --gap-description:   7px;
  --gap-paragraph:    20px;
  --gap-section:      20px;
  --gap-list:         10px;
  --gap-list-item:     5px;
  --gap-entry:        31px;
  --gap-lang:          8px;
  --gap-skills-row:   32px;
  --gap-course-title:  4px;

  --control-height:  44px;
  --control-radius:  12px;
  --project-gap:     20px;
  --project-cover: 10 / 7;

  --link-underline-offset:    2px;
  --link-underline-thickness: 1px;

  --cookie-offset:   24px;
  --menu-edge:  rgba(0, 0, 0, 0.10);
  --menu-scrim: rgba(16, 16, 18, 0.28);

  --cookie-width: max(260px, calc(50vw - var(--layout-width) / 2 - var(--cookie-offset) * 2));
  --cookie-padding:  16px;
  --cookie-radius:   16px;
  --cookie-edge: rgba(0, 0, 0, 0.10);

  --scrollbar-lane:         14px;
  --scrollbar-inset:         4px;
  --scrollbar-gap:           4px;
  --scrollbar-gap-wide:      3px;
  --scrollbar-thumb-width:   6px;
  --scrollbar-thumb-wide:    9px;
  --scrollbar-thumb:        rgba(0, 0, 0, 0.30);
  --scrollbar-thumb-strong: rgba(0, 0, 0, 0.48);
  --scrollbar-lane-bg:      rgba(250, 250, 250, 0.72);
  --scrollbar-lane-edge:    rgba(0, 0, 0, 0.08);

  --rise-motion:  760ms;
  --rise-shift:    18px;
  --rise-step:     70ms;
  --rise-base:     70ms;
  --rise-nested:  240ms;

  --theme-motion: 320ms;
  --theme-ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 880px) {
  :root {
    --card-padding:  16px;
    --card-radius:   20px;
    --page-padding-y: 12px;

    --avatar-size:       120px;
    --avatar-photo-size: 104px;

    --font-size-name:      22px;
    --line-height-name:     29px;
    --font-size-salary:    22px;
    --line-height-salary:   29px;
  }
}

:root.dark {
  color-scheme: dark;

  --color-bg:            #101012;
  --color-surface:       #18181b;
  --color-text:          #ececee;
  --color-text-muted:    #8e8e96;
  --color-chip-bg:       #232327;
  --color-focus:         #ececee;

  --color-lift:          #2c2c31;
  --color-border-hover:  #34343a;
  --color-cover-hover:   #2c2c31;

  --color-bullet:        #4fb980;
  --color-accent:        #2c2c33;
  --color-accent-text:   #f2f2f4;
  --color-accent-hover:  #ffffff;

  --header-bg:      rgba(255, 255, 255, 0.06);
  --header-border:  rgba(255, 255, 255, 0.10);

  --menu-edge:  rgba(255, 255, 255, 0.14);
  --menu-scrim: rgba(0, 0, 0, 0.50);

  --cookie-edge: rgba(255, 255, 255, 0.14);

  --scrollbar-thumb:        rgba(255, 255, 255, 0.28);
  --scrollbar-thumb-strong: rgba(255, 255, 255, 0.46);
  --scrollbar-lane-bg:      rgba(24, 24, 27, 0.72);
  --scrollbar-lane-edge:    rgba(255, 255, 255, 0.08);
}

@property --color-bg { syntax: "<color>"; inherits: true; initial-value: #f3f3f3; }
@property --color-surface { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --color-text { syntax: "<color>"; inherits: true; initial-value: #222222; }
@property --color-text-muted { syntax: "<color>"; inherits: true; initial-value: #888888; }
@property --color-chip-bg { syntax: "<color>"; inherits: true; initial-value: #f8f7f7; }
@property --color-focus { syntax: "<color>"; inherits: true; initial-value: #222222; }
@property --color-lift { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --color-border-hover { syntax: "<color>"; inherits: true; initial-value: #e2e0e0; }
@property --color-cover-hover { syntax: "<color>"; inherits: true; initial-value: #efeded; }
@property --color-accent { syntax: "<color>"; inherits: true; initial-value: #222222; }
@property --color-accent-text { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --color-accent-hover { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --header-bg { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.1); }
@property --header-border { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.08); }
@property --scrollbar-thumb { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.30); }
@property --scrollbar-thumb-strong { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.48); }
@property --scrollbar-lane-bg { syntax: "<color>"; inherits: true; initial-value: rgba(250, 250, 250, 0.72); }
@property --scrollbar-lane-edge { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.08); }
@property --cookie-edge { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.10); }
@property --color-bullet { syntax: "<color>"; inherits: true; initial-value: #1a7f4b; }
@property --menu-edge { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.10); }
@property --menu-scrim { syntax: "<color>"; inherits: true; initial-value: rgba(16, 16, 18, 0.28); }