/* Design tokens: fonts, colors, sizes, both themes.
   Sizes below are the desktop design (1440 x 900 stage).
   Phone and tablet override them at the bottom of this file. */

:root {
  /* Brand */
  --accent: #1e6fff;
  --dark-blue: #1638a8;
  --cyan: #00d4ff;

  /* Fonts */
  --font-display: "Saira", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  /* Motion */
  --ease-slide: cubic-bezier(0.77, 0, 0.18, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-corner: cubic-bezier(0.65, 0, 0.25, 1);
  --slide-ms: 0.9s;

  /* Shapes */
  --cut-12: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --cut-14: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --cut-10: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --octagon: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  --octagon-sm: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);

  /* Stage */
  --stage-w: 1440px;
  --stage-h: 900px;

  /* Section titles */
  --sec-title: 30px;

  /* Home */
  --name-x: 84px;
  --name-y: 192px;
  --name-size: 128px;
  --bar-y: 548px;
  --bar-w: 46px;
  --bar-h: 6px;
  --role-y: 620px;
  --role-gap: 26px;
  --role-fs: 16px;
  --strip-x: 840px;
  --strip-w: 440px;
  --strip-h: 640px;
  --strip-clip: polygon(176px 0, 352px 0, 258px 360px, 418px 360px, 418px 620px, 40px 620px);
  --code-fs: 12.5px;
  --code-lh: 22px;
  --code-x: 70px;
  --code-num-w: 30px;
  --photo-x: 520px;
  --photo-bottom: -40px;
  --photo-h: 860px;
  --grid-size: 56px;

  /* Projects */
  --pad-x: 84px;
  --proj-name: 60px;

  /* Header and corner menu (mobile only) */
  --top-y: 40px;
  --logo-h: 36px;
  --tab-bottom: 22px;
  --menu-base: 42px;
  --menu-gap: 10px;
  --menu-icon: 20px;
}

/* Light theme */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9ecf0;
  --ink: #1a2235;
  --body: #2c3548;
  --name: #0b1430;
  --outline: #26324d;
  --muted: #5f697c;
  --faint: #9aa3b2;
  --rule: #b9c0cc;
  --strip: #13213f;
  --lens-line: #9dbcff;
  --lens-fill: #eef3ff;
  --chip: #f6f7fa;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-bar: rgba(255, 255, 255, 0.86);
  --grid: rgba(30, 111, 255, 0.05);
  --nav-active: #1a2235;
  --role-title: #26324d;
  --streak: #ffffff;
  --streak-a: 0.8;
  --streak-b: 0.65;
  --blob-a: 0.1;
  --shade: rgba(26, 34, 53, 0.06);
  --oct-fill: #f3f5f9;
  --oct-fill-on: #dfe7ff;
  --paper: #ffffff;
  --paper-fold: #d5dbe6;
  --split: rgba(22, 56, 168, 0.6);
  --gh-bg: #181717;
  --edge-1: #1e6fff;
  --edge-2: #1638a8;
  --edge-3: #0a7d66;
  --photo: contrast(1.05) drop-shadow(0 0 1.5px rgba(30, 111, 255, 0.45)) drop-shadow(14px -6px 34px rgba(30, 111, 255, 0.18));
  --photo2: contrast(1.04) drop-shadow(-14px 10px 30px rgba(26, 34, 53, 0.22));
  --mastery-inner: rgba(30, 111, 255, 0.1);
}

/* Dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060912;
  --ink: #e6ebf7;
  --body: #c3cbdc;
  --name: #f2f5ff;
  --outline: #6c80b4;
  --muted: #8d97ab;
  --faint: #5c667b;
  --rule: #2a3247;
  --strip: #0b1a3d;
  --lens-line: #a9c6ff;
  --lens-fill: #ffffff;
  --chip: #0d1426;
  --glass: rgba(10, 16, 32, 0.78);
  --glass-bar: rgba(12, 18, 34, 0.86);
  --grid: rgba(92, 155, 255, 0.05);
  --nav-active: #f2f5ff;
  --role-title: #dfe6f5;
  --streak: #1e6fff;
  --streak-a: 0.16;
  --streak-b: 0.1;
  --blob-a: 0.14;
  --shade: rgba(30, 111, 255, 0.05);
  --oct-fill: #0b1222;
  --oct-fill-on: #10224d;
  --paper: #f4f6fb;
  --paper-fold: #9fb0cf;
  --split: rgba(22, 56, 168, 0.85);
  --gh-bg: #24292f;
  --edge-2: #5c9bff;
  --edge-3: #86f0d6;
  --photo: brightness(0.86) contrast(1.1) saturate(0.92) drop-shadow(0 0 1.5px rgba(92, 155, 255, 0.75)) drop-shadow(14px -6px 34px rgba(30, 111, 255, 0.35));
  --photo2: brightness(0.84) contrast(1.08) saturate(0.9) drop-shadow(0 0 1.5px rgba(92, 155, 255, 0.7)) drop-shadow(-14px -6px 34px rgba(30, 111, 255, 0.3));
  --mastery-inner: rgba(30, 111, 255, 0.18);
}

/* Phone and tablet, shared. Everything is anchored to the real viewport,
   not the 1440 x 900 stage. */
@media (max-width: 1023.98px) {
  :root {
    --strip-clip: polygon(50% 0, 92% 0, 50% 100%, 8% 100%);
    --sec-title: 26px;
    --logo-h: 26px;
    --top-y: 54px;
    --tab-bottom: 22px;
    --menu-base: 42px;
    --menu-gap: 10px;
    --menu-icon: 20px;
    --bar-w: 26px;
    --bar-h: 4px;
    --role-gap: 14px;
    --photo-bottom: 0px;
    --photo-x: calc(56% - 0.34172 * var(--photo-h));
    --grid-size: 40px;
    --proj-name: 28px;
  }
}

/* Phone, under 600px (iPhone 14 Pro, 393 x 852) */
@media (max-width: 599.98px) {
  :root {
    --pad-x: 20px;
    --name-x: 20px;
    --name-y: 116px;
    --name-size: 50px;
    --bar-y: calc(var(--name-y) + 3 * 0.86 * var(--name-size) + 8px);
    --role-y: 270px;
    --role-fs: 10.5px;
    --strip-x: 150px;
    --strip-w: 250px;
    --strip-h: 640px;
    --code-fs: 9px;
    --code-lh: 16px;
    --code-x: 44px;
    --code-num-w: 20px;
    --photo-h: 520px;

    --content-top: 112px;
    --bottom-safe: 104px;

    --oct-size: 70px;
    --oct-step: 41px;
    --oct-top: 160px;
    --oct-row: 50px;
    --oct-init: 20px;
    --panel-top: 296px;
    --panel-gap: 14px;
    --sum-fs: 14px;
    --tech-size: 36px;
    --pager-bottom: 95px;

    --a-photo-h: 270px;
    --a-photo-top: 58px;
    --a-strip-x: 72px;
    --a-strip-w: 250px;
    --a-title-top: 338px;
    --a-title-w: 353px;
    --a-tabs-top: 386px;
    --a-tab-h: 40px;
    --a-tab-fs: 10.5px;
    --a-tab-flex: 1;
    --a-content-top: 440px;
    --tile-h: 60px;
    --how-cols: minmax(0, 1fr);

    --ct-head: 40px;
    --ct-gap: 12px;
    --qr: 108px;
    --fill-h: 84px;
    --fill-oct: 70px;
    --fill-tag: 15px;
    --cta-sub: 9.5px;
    --social-icon: 26px;

    --streak-w: 520px;
  }
}

/* Tablet, 600px to 1023px (iPad, 820 x 1180) */
@media (min-width: 600px) and (max-width: 1023.98px) {
  :root {
    --sec-title: 34px;
    --logo-h: 34px;
    --top-y: 30px;
    --tab-bottom: 28px;
    --menu-base: 52px;
    --menu-gap: 12px;
    --menu-icon: 24px;
    --bar-w: 40px;
    --bar-h: 6px;
    --role-gap: 22px;
    --proj-name: 50px;

    --pad-x: 56px;
    --name-x: 56px;
    --name-y: 120px;
    --name-size: 100px;
    --bar-y: calc(var(--name-y) + 3 * 0.86 * var(--name-size) + 14px);
    --role-y: 418px;
    --role-fs: 12px;
    --strip-x: 420px;
    --strip-w: 440px;
    --strip-h: 900px;
    --code-fs: 12.5px;
    --code-lh: 22px;
    --code-x: 70px;
    --code-num-w: 30px;
    --photo-h: 800px;

    --content-top: 108px;
    --bottom-safe: 116px;

    --oct-size: 110px;
    --oct-step: 84px;
    --oct-top: 172px;
    --oct-row: 80px;
    --oct-init: 32px;
    --panel-top: 400px;
    --panel-gap: 20px;
    --sum-fs: 17px;
    --tech-size: 46px;
    --pager-bottom: 118px;

    --a-photo-h: 470px;
    --a-photo-top: 54px;
    --a-strip-x: 190px;
    --a-strip-w: 440px;
    --a-title-top: 540px;
    --a-title-w: 708px;
    --a-tabs-top: 596px;
    --a-tab-h: 46px;
    --a-tab-fs: 12px;
    --a-tab-flex: 1;
    --a-content-top: 660px;
    --tile-h: 74px;
    --how-cols: repeat(2, minmax(0, 1fr));

    --ct-head: 84px;
    --ct-gap: 18px;
    --qr: 180px;
    --fill-h: 150px;
    --fill-oct: 110px;
    --fill-tag: 22px;
    --cta-sub: 12px;
    --social-icon: 44px;

    --streak-w: 900px;
  }
}