/* ============================================================
   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-700: clamp(1.94rem,  calc(1.54rem + 2.03vw), 3.11rem);
    --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%, 30%),  hsl(220, 65%, 55%));  /* deep ocean blue      */

    /* — 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        */

    /* — open slot: 675 — */

    --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-900);   /* 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(0, 0%,   0%);


    /* ============================================================
       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-725);       /* bold deep rose       */
    --clr-secondary-soft:   var(--clr-700);       /* soft rose pink       */
    --clr-accent:           var(--clr-850);       /* bold violet          */
    --clr-accent-soft:      var(--clr-800);       /* soft lavender        */

    /* Interactive */
    --clr-interactive:       var(--clr-450);      /* links, focus rings   */
    --clr-interactive-hover: var(--clr-525);      /* hover state          */

}


/* ============================================================
   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 */
}
/* ===============================
   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 CIRCLE & SEMANTIC TOKENS
   ============================================================ */
:root {
    --clr-circle-1:          #ff66c4;
    --clr-circle-2:          #99d9dd;
    --clr-circle-3:          #c9a8e8;
    --clr-circle-4:          #ffb3e0;
    --clr-hero-heading:      var(--clr-neutral-600);
    --clr-hero-heading-span: var(--clr-525);
    --clr-hero-body:         var(--clr-neutral-600);
    --clr-hero-btn-bg:       var(--clr-primary);
    --clr-hero-btn-text:     var(--clr-text-white-always);
    --clr-hero-circle:       #017143;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
#hero-section {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    padding: 5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
}

.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(600px at right 800px); 
    /* clip-path: circle(420px at 70% 50%); */
    background: var(--clr-hero-circle);
    border: 8px solid hsla(215, 83%, 65%, 0.2);
    z-index: 0;
}

.content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.content .textbox {
    flex: 1;
    max-width: 45%;
}

.content .textbox h2 {
    color: var(--clr-hero-heading);
    font-size: var(--fs-700);
    line-height: 1.3em;
    font-weight: 500;
}

.content .textbox h2 span {
    color: var(--clr-hero-heading-span);
    font-size: 1.4em;
    font-weight: 900;
    display: block;
}

.content .textbox p {
    color: var(--clr-hero-body);
    margin-top: 1rem;
    font-size: var(--fs-400);
}

.content .textbox a {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 8px 20px;
    background-color: var(--clr-hero-btn-bg);
    color: var(--clr-hero-btn-text);
    border-radius: 40px;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none;
}

.content .imagebox {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.content .imagebox img {
    max-width: 800px;
    width: 100%;
    border-radius: 8px;
}

/* Thumbnails */
.thumb {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 4rem;
    padding-bottom: 1rem;
}

.thumb li {
    list-style: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.thumb li:hover {
    transform: translateY(-10px);
}

.thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--clr-border);
}

/* Poem links — sci block */
/* .sci {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.sci li {
    list-style: none;
}

.sci li a {
    display: inline-block;
    padding: 4px 10px;
    color: var(--clr-text-900);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-400);
    letter-spacing: 0.03rem;
    transition: color 0.2s ease;
}

.sci li a:hover,
.sci a.active {
    color: var(--clr-secondary);
    text-decoration: underline;
} */

/* ============================================================
   THIRD SECTION — POEMS
   ============================================================ */
#third-section {
    padding: 4rem 4rem;
    min-height: 300px;
}

.poem-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.poem {
    display: none;
}

.poem.active {
    display: block;
}

.poem h3 {
    font-size: var(--fs-600);
    color: var(--clr-secondary);
    margin-bottom: 1rem;
}

.poem p {
    font-size: var(--fs-400);
    color: var(--clr-text-body);
    line-height: 2;
}

.poem-links a.active {
    color: var(--clr-secondary);
    text-decoration: underline;
}
/* ==== remove - testing ==== */
html, body {
    height: auto;
    overflow: visible;
}

main {
    display: block;
    overflow: visible;
}