/* ===========================================================
   AURALIS — shared design tokens & primitives
   Palette + reset + grain + custom cursor scaffolding.
   Layout & type live in each option's own stylesheet.
   =========================================================== */

:root{
  /* ===== AURALIS brand palette — the ONLY colours used site-wide ===== */
  --black: #000000;   /* Black           — site background          */
  --green: #00534D;   /* Plankton Green  — accents + surfaces        */
  --cream: #E6E4C4;   /* Fountain Frolic — primary text / paper      */
  --white: #FFFFFF;   /* White           — max-contrast highlight    */

  /* ---- semantic aliases, mapped onto the four brand colours ---- */
  --ink:        var(--black);   /* page background — black         */
  --ink-2:      var(--black);   /* raised panel                    */
  --ink-3:      var(--green);   /* media / card placeholder fill   */
  --cream-soft: var(--cream);
  --blue:       var(--green);   /* accent (dots, emphasis, rules)  */
  --teal:       var(--green);   /* gradient accent                 */
  --ember:      var(--green);   /* gradient accent                 */

  /* Black at reduced opacity — secondary text on a Fountain Frolic "paper" surface */
  --ink-72: rgba(0,0,0,.72);

  /* Fountain Frolic at reduced opacity (same hue, faded) */
  --cream-60: rgba(230,228,196,.60);
  --cream-40: rgba(230,228,196,.40);
  --cream-24: rgba(230,228,196,.24);
  --line:     rgba(230,228,196,.12);
  --line-2:   rgba(230,228,196,.22);

  --ease:      cubic-bezier(.2,.8,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);

  --shell: clamp(20px, 5vw, 96px); /* page gutter */

  /* Iconography — optically-centred, properly-weighted arrows. The Unicode
     → / ↑ glyphs render thin and sit slightly off-centre in a disc; these are
     drawn on a 24×24 grid centred on (12,12) and applied as a mask so the arrow
     takes its colour from the element (currentColor) and transitions with it. */
  --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12.5 6 19 12l-6.5 6'/%3E%3C/svg%3E");
  --arrow-u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M6 11 12 5l6 6'/%3E%3C/svg%3E");
  --arrow-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13 12 19l6-6'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:"Helvetica Neue","HelveticaNeue",Helvetica,"Arial Nova",Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
::selection{background:var(--blue);color:var(--cream)}

/* ---- film grain overlay (shared) ---- */
.grain{
  position:fixed;inset:-50%;
  z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}
  20%{transform:translate(-8%,2%)}30%{transform:translate(2%,-8%)}
  40%{transform:translate(-2%,6%)}50%{transform:translate(-8%,4%)}
  60%{transform:translate(4%,0)}70%{transform:translate(0,6%)}
  80%{transform:translate(-6%,-2%)}90%{transform:translate(2%,8%)}
  100%{transform:translate(0,0)}
}

/* ---- custom cursor (shared scaffold) ---- */
@media (hover:hover) and (pointer:fine){
  .cursor{
    position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
    width:8px;height:8px;border-radius:50%;
    background:var(--cream);
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease),height .25s var(--ease),
               background .25s var(--ease),opacity .25s var(--ease);
    mix-blend-mode:difference;
  }
  .cursor.is-hover{width:46px;height:46px;background:var(--cream)}
  .cursor.is-hidden{opacity:0}
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button{cursor:none}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .grain{animation:none}
}

/* accessibility helper */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}