/* ============================================================
   STYLES.CSS — Barby's Creative Portfolio
   Primitive Design Tokens — site-wide / global

   A single-page creative portfolio for artist & poet Barby.
   Features: art gallery slideshow, poetry, and about section.

   Color numbering system: hue position on 360° color wheel
   Blues    (Primary):   ~200–230°  slots 400–525
   Pinks    (Secondary): ~315–355°  slots 600–750
   Purples  (Accent):    ~260–280°  slots 800–875
   Neutrals: 050–950  (light → dark)

   Semantic tokens live at the bottom of this file.
   Nav tokens  → nav.css
   Footer tokens → footer.css
   ============================================================ */

:root                { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light;      }
[data-theme="dark"]  { color-scheme: dark;        }

:root {

    /* ============================================================
       SECTION 1 — TYPOGRAPHY
       ============================================================ */

    --font-family:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --line-height:   1.6;

    --content-max-width: 100%;

    /* Fluid type scale */
    --fs-300: clamp(0.94rem,  calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400: clamp(1.13rem,  calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem,  calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem,  calc(1.37rem + 1.24vw), 2.33rem);
    --fs-650: clamp(1.79rem,  calc(1.39rem + 2.03vw), 2.96rem);  /* fs-700, shifted down 0.15rem */
    --fs-700: clamp(1.94rem,  calc(1.54rem + 2.03vw), 3.11rem);
    --fs-750: clamp(2.23rem,  calc(1.60rem + 3.15vw), 4.04rem);  /* fs-800, shifted down 0.1rem */
    --fs-800: clamp(2.33rem,  calc(1.70rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.80rem,  calc(1.85rem + 4.74vw), 5.52rem);


    /* ============================================================
       SECTION 2 — BRAND COLOR PRIMITIVES
       Numbered by hue position on 360° color wheel
    
     pastel cyan #99d9dd
       cobalt blue. #99d9dd
       Pastel azure  #99d9dd
      bright pink   #ff66c4
       ============================================================ */

    /* — Blues  ~200–230°  ——————————————————————————————————— */
    --clr-400: light-dark(hsl(200, 70%, 80%),  hsl(200, 70%, 65%));  /* soft sky blue        */
    --clr-425: light-dark(hsl(207, 65%, 60%),  hsl(207, 65%, 72%));  /* mid sky blue         */
    --clr-450: light-dark(hsl(210, 75%, 45%),  hsl(210, 75%, 62%));  /* bold ocean blue      */

    /* — open slots: 475, 500 — */

    --clr-525: light-dark(hsl(220, 65%, 45%),  hsl(220, 65%, 55%));  /* deep ocean blue      */
    --clr-525-light-always: hsl(220, 65%, 55%); 
    --clr-525-dark-always: hsl(220, 65%, 45%);
    /* — open slots: 550, 575 — */

    /* — Pinks  ~315–355°  ——————————————————————————————————— */

    /* — open slot: 600 — */

    --clr-625: light-dark(hsl(315, 70%, 75%),  hsl(315, 70%, 82%));  /* soft bubblegum pink  */
    --clr-650: light-dark(hsl(325, 75%, 60%),  hsl(325, 75%, 72%));  /* bold hot pink        */

   
    --clr-675: hsla(320, 90%, 58%, 1);
    --clr-675-alpha:  hsla(320, 90%, 58%, 0.6);
    --clr-675-light:  hsla(320, 90%, 68%, 1);
    --clr-700: light-dark(hsl(338, 70%, 72%),  hsl(338, 70%, 80%));  /* soft rose pink       */
    --clr-725: light-dark(hsl(345, 80%, 55%),  hsl(345, 80%, 68%));  /* bold deep rose       */

    /* — open slots: 750, 775 — */

    /* — Purples  ~260–280°  ————————————————————————————————— */
    --clr-800: light-dark(hsl(275, 60%, 80%),  hsl(275, 60%, 85%));  /* soft lavender        */
    --clr-825: light-dark(hsl(270, 70%, 65%),  hsl(270, 70%, 75%));  /* mid lavender         */
    --clr-850: light-dark(hsl(263, 75%, 45%),  hsl(263, 75%, 62%));  /* bold violet          */

    /* — open slots: 875, 900 — */


    /* ============================================================
       SECTION 3 — NEUTRALS
       light → dark: 050 (white) → 950 (black)
       ============================================================ */

    --clr-neutral-050: light-dark(hsl(220, 14%, 100%),  hsl(220, 14%,   7%)); /* white       / deepest black */
    --clr-neutral-100: light-dark(hsl(220, 10%,  97%),  hsl(220, 10%,  12%)); /* off white   / near black    */
    --clr-neutral-200: light-dark(hsl(220,  8%,  85%),  hsl(220,  8%,  22%)); /* light gray  / dark gray     */
    --clr-neutral-300: light-dark(hsl(220,  7%,  70%),  hsl(220,  7%,  35%)); /* mid-light gray              */
    --clr-neutral-400: light-dark(hsl(220,  7%,  60%),  hsl(220,  7%,  45%)); /* mid gray                    */
    --clr-neutral-500: light-dark(hsl(220,  7%,  45%),  hsl(220,  8%,  60%)); /* mid-dark gray               */
    --clr-neutral-600: light-dark(hsl(220,  7%,  35%),  hsl(220,  8%,  75%)); /* dark gray                   */
    --clr-neutral-700: light-dark(hsl(220, 10%,  20%),  hsl(220, 10%,  88%)); /* darker gray                 */
    --clr-neutral-800: light-dark(hsl(220, 12%,  12%),  hsl(220, 12%,  94%)); /* very dark   / near white    */
    --clr-neutral-900: light-dark(hsl(220, 14%,   7%),  hsl(220, 14%,  97%)); /* near black  / off white     */
    --clr-neutral-950: hsl(220, 14%, 2%);                                      /* black — always              */


    /* ============================================================
       SECTION 4 — TEXT
       ============================================================ */

    --clr-text-100: light-dark(hsl(220, 14%, 98%),  hsl(220, 14%,  8%));  /* near white / near black  */
    --clr-text-500: light-dark(hsl(220,  7%, 50%),  hsl(220,  7%, 60%));  /* mid gray                 */
    --clr-text-900: light-dark(hsl(220, 14%,  7%),  hsl(220, 14%, 97%));  /* near black / near white  */

    /* Semantic text aliases */
    --clr-text-heading:  var(--clr-text-black-always);   /* h1–h3                  */
    --clr-text-body:     var(--clr-text-900);   /* paragraphs             */
    --clr-text-muted:    var(--clr-text-500);   /* captions, placeholders */
    --clr-text-inverted: var(--clr-text-100);   /* text on dark surfaces  */

    /* Always-fixed */
    --clr-text-white-always: hsl(0, 0%, 100%);
    --clr-text-black-always: hsl(249, 98%, 17%);


    /* ============================================================
       SECTION 5 — SHADOWS & OVERLAYS
       ============================================================ */

    --clr-shadow-sm:  light-dark(hsla(220, 20%, 0%, 0.08),  hsla(220, 20%, 0%, 0.30));
    --clr-shadow-md:  light-dark(hsla(220, 20%, 0%, 0.16),  hsla(220, 20%, 0%, 0.50));
    --clr-shadow-lg:  light-dark(hsla(220, 20%, 0%, 0.28),  hsla(220, 20%, 0%, 0.70));

    --clr-scrim:      light-dark(hsla(220, 14%, 0%, 0.3),   hsla(220, 14%, 100%, 0.3));

    /* Colored shadows */
    --clr-shadow-blue:   hsla(207, 65%, 60%, 0.4);
    --clr-shadow-pink:   hsla(338, 70%, 65%, 0.4);
    --clr-shadow-purple: hsla(270, 70%, 55%, 0.4);


    /* ============================================================
       SECTION 6 — SEMANTIC ALIASES
       Site-wide surface, background, border & interactive tokens
       ============================================================ */

    /* Backgrounds */
    --clr-bg:           var(--clr-neutral-050);   /* page background      */
    --clr-bg-surface:   var(--clr-neutral-100);   /* cards, panels        */
    --clr-bg-elevated:  var(--clr-neutral-200);   /* tooltips, dropdowns  */

    /* Borders */
    --clr-border:        var(--clr-neutral-200);  /* default border       */
    --clr-border-strong: var(--clr-neutral-400);  /* emphasized border    */

    /* Brand semantic aliases */
    --clr-primary:          var(--clr-450);       /* bold ocean blue      */
    --clr-primary-soft:     var(--clr-400);       /* soft sky blue        */
    --clr-secondary:        var(--clr-675);       /* very pink       */
    --clr-secondary-soft:   var(--clr-700);       /* soft rose pink       */
    --clr-accent:           var(--clr-850);       /* bold violet          */
    --clr-accent-soft:      var(--clr-800);       /* soft lavender        */

    /*== add light/dark== Interactive */
    --clr-interactive:       var(--clr-525-light-always);      /* links, focus rings   */
    --clr-interactive-hover: var(--clr-525-dark-always);      /* hover state          */

    /* State indicators */
    --clr-active:            var(--clr-525-light-always);      /* active/selected state (thumb underline, poem link) */
}


/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===============================
   Reset
   =============================== */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
    margin: 0;
    padding: 0;
}

img, picture, video {
    display: block;
    max-width: 100%;
}

p {
    text-wrap: pretty;
}

h1, h2, h3 {
    text-wrap: balance;
}
/* ============================================================
   MODERN-WEBKIT-PREFIXES.CSS 
/* ===============================
   Typography & Font Smoothing
   =============================== */
body {
    -webkit-font-smoothing: antialiased;      /* Chrome, Safari, Edge — crisp text on retina */
    -moz-osx-font-smoothing: grayscale;       /* Firefox on Mac */
    -webkit-text-size-adjust: 100%;           /* Prevents iOS Safari auto text resize on rotate */
}
.gradient-text span {
  background: linear-gradient(to right, #ff6b6b, #845ef7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--fs-700);
}
/* ===============================
   Custom Scrollbar
   Chrome, Safari, Edge
   =============================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}
/* ===============================
   Form Elements
   =============================== */
 input, button, textarea, select {
    -webkit-appearance: none;                 /* Remove default browser form styling */
    appearance: none;                         /* Official standard — write both */
}
/* ===============================
   Gradient Text Effect
   Use on a class when needed
   =============================== */
.gradient-text {
    -webkit-background-clip: text;            /* Safari still needs prefix */
    background-clip: text;                    /* Official standard — write both */
    color: transparent;
}
/* With a <size-query> */
/* @container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
} */
/* ============================================================
   SECTION 7 — HERO OVERLAY & SEMANTIC TOKENS
   ============================================================ */
/* :root {
    --clr-overlay-1:          #ff66c4;
    --clr-overlay-2:          #99d9dd;
    --clr-overlay-3:          #c9a8e8;
    --clr-overlay-4:         #ffb3e0;
    --clr-hero-heading:      var(--clr-text-black-always); 
    --clr-hero-heading-span: var(--clr-675-light);
    --clr-hero-body:         hsl(220, 7%, 35%);  
    --clr-hero-btn-bg:       var(--clr-text-white-always); 
    --clr-hero-btn-text:     var(--clr-text-black-always);
} */
/* ============================================================
   SECTION 7B — HERO TOKENS FORCED TO DARK VALUES (TEST)
   Temporary override — comment out Section 7's hero block below
   to activate. To revert: comment this block out, uncomment
   Section 7 instead.
   ============================================================ */
:root {
    --clr-hero-heading:      hsl(249, 98%, 17%);   /* same fixed value as before — no dark variant existed */
    --clr-hero-heading-span: hsla(320, 90%, 68%, 1); /* same fixed value as before */
    --clr-hero-body:         hsl(220, 7%, 35%);    /* same fixed value as before */
    --clr-hero-btn-bg:       hsl(0, 0%, 100%);     /* same fixed value as before */
    --clr-hero-btn-text:     hsl(249, 98%, 17%);   /* same fixed value as before */
    --clr-hero-shadow:       hsl(220, 14%, 97%);   /* dark-mode value of --clr-text-900 */
}
/* ============================================================
   HERO SECTION
   ============================================================ */
#hero-section {
    position: relative;
    overflow: hidden;
    width: auto;
    min-height: calc(100vh - 340px);
    padding: 2rem 4rem;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-margin-top: 100px; */
}
.hero-image {
    background-image: url('../images/tattered-flag-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 96vh;
}
/* ============================================================
   SECOND SECTION
   ============================================================ */
#second-section {
    position: relative;
    overflow: hidden;
    width: auto;
    min-height: calc(100vh - 340px);
    padding: 2rem 4rem;
    background-color: antiquewhite;
    text-align: center;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-margin-top: 100px; */
}