/* DyorHQ foundation. Single source for color, type and scale.
   Concept: cool off-white canvas, frosted holographic glass cards, dark 3D tiled scenes,
   geometric sans mixing LIGHT (300) and BOLD (700) in one headline, near-black pills.
   Adaptive: light by default; dark via prefers-color-scheme or the [data-theme] toggle.
   In dark mode the page inverts but the glass surfaces (white cards, frosted tiles) keep
   their dark ink, and the giant-type cover stays light so the masked "DyorHQ" still reads. */

@font-face{font-family:"Manrope";src:url("../assets/fonts/manrope.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/ibm-plex-mono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/ibm-plex-mono-medium.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;   /* geometric sans, light+bold mix */
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* canvas + ink */
  --canvas:#F3F3F6;          /* cool off-white page ground */
  --surface:#FFFFFF;
  --ink:#0F0F14;
  --text:#0F0F14;
  --text-2:#4A4A56;          /* body, AA on canvas */
  --text-3:#6E6E7C;          /* small caps labels, AA on canvas */
  --line:rgb(15 15 20 / .12);
  --line-2:rgb(15 15 20 / .22);
  --chip-bg:rgb(255 255 255 / .5);      /* chip + outline button fill */
  --input-bg:rgb(255 255 255 / .6);
  --input-border:rgb(15 15 20 / .5);    /* ≥3:1 against the canvas (non-text contrast) */
  --input-focus-bg:#FFFFFF;
  --mark-filter:none;                   /* the wordmark PNG is dark; inverted in dark mode */
  --giant-cover:#F3F3F6;     /* the canvas-coloured plate the giant letters are cut from */

  /* dark 3D scenes (the same in both themes) */
  --dark:#0D0D11;            /* scene ground */
  --dark-2:#15151A;
  --tile:#1A1A20;            /* wall tiles */
  --tile-hi:#262630;         /* tile lit edge */
  --floor:#2A2A31;           /* concrete floor */
  --floor-hi:#3A3A43;
  --on-dark:#F4F4F8;
  --on-dark-2:rgb(244 244 248 / .7);
  --arrow:#B9B9C4;           /* the big pale arrow sculptures */

  /* holographic palette (the iridescent shapes inside the glass) */
  --holo-pink:#FF5C9C;
  --holo-blue:#4F7BFF;
  --holo-deep:#1E3CFF;
  --holo-orange:#FF7A2F;
  --holo-purple:#9B7BFF;
  --holo-cyan:#3AD8F6;
  --holo-ice:#DCE7FF;

  /* frosted glass */
  --glass-hi:rgb(255 255 255 / .95);
  --glass-blur:18px;

  /* pills */
  --pill-bg:#0F0F14;
  --pill-fg:#FFFFFF;

  /* radii + scale */
  --r-card:22px;   /* holographic cards */
  --r-tile:24px;   /* bento tiles */
  --r-pill:999px;
  --r-frame:16.5%; /* phone bezel */
  --maxw:1280px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* shadows */
  --shadow-sm:0 1px 2px rgb(15 15 20 / .06);
  --shadow-card:0 2px 6px rgb(15 15 20 / .06),0 34px 70px -34px rgb(15 15 20 / .38);
  --shadow-device:0 2px 6px rgb(0 0 0 / .25),0 50px 90px -34px rgb(0 0 0 / .7);
}

/* ---- dark: follow the OS unless the visitor forced light ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#0F0E17;
    --surface:#17162A;
    --ink:#F1F0FA;
    --text:#F1F0FA;
    --text-2:#B9B7CE;
    --text-3:#928FA9;
    --line:rgb(255 255 255 / .12);
    --line-2:rgb(255 255 255 / .24);
    --chip-bg:rgb(255 255 255 / .06);
    --input-bg:rgb(255 255 255 / .06);
    --input-border:rgb(255 255 255 / .45);
    --input-focus-bg:#1C1B30;
    --mark-filter:brightness(0) invert(1);
    --pill-bg:#F1F0FA;
    --pill-fg:#0F0F14;
    --shadow-sm:0 1px 2px rgb(0 0 0 / .35);
    --shadow-card:0 2px 6px rgb(0 0 0 / .3),0 34px 70px -34px rgb(0 0 0 / .75);
  }
  /* glass surfaces keep dark ink on a white face */
  :root:not([data-theme="light"]) .holo:not(.holo--deep){--ink:#0F0F14;--text-3:#6E6E7C;--surface:#FFFFFF;--glass-face:linear-gradient(128deg,rgb(255 255 255 / .97),rgb(255 255 255 / .9))}
  :root:not([data-theme="light"]) .tile{--surface:#FFFFFF}
  :root:not([data-theme="light"]) .tile--holo-light{--ink:#0F0F14;--text-3:#6E6E7C}
}

/* ---- dark: forced by the toggle ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0F0E17;
  --surface:#17162A;
  --ink:#F1F0FA;
  --text:#F1F0FA;
  --text-2:#B9B7CE;
  --text-3:#928FA9;
  --line:rgb(255 255 255 / .12);
  --line-2:rgb(255 255 255 / .24);
  --chip-bg:rgb(255 255 255 / .06);
  --input-bg:rgb(255 255 255 / .06);
  --input-border:rgb(255 255 255 / .45);
  --input-focus-bg:#1C1B30;
  --mark-filter:brightness(0) invert(1);
  --pill-bg:#F1F0FA;
  --pill-fg:#0F0F14;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .35);
  --shadow-card:0 2px 6px rgb(0 0 0 / .3),0 34px 70px -34px rgb(0 0 0 / .75);
}
:root[data-theme="dark"] .holo:not(.holo--deep){--ink:#0F0F14;--text-3:#6E6E7C;--surface:#FFFFFF;--glass-face:linear-gradient(128deg,rgb(255 255 255 / .97),rgb(255 255 255 / .9))}
:root[data-theme="dark"] .tile{--surface:#FFFFFF}
:root[data-theme="dark"] .tile--holo-light{--ink:#0F0F14;--text-3:#6E6E7C}