/* ==========================================================================
   THEME: fonts, colours and animation.
   This is the only file you need to edit to change how the site LOOKS.
   (To change how it's LAID OUT on desktop vs mobile, see layout.css.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   1. Pick fonts at https://fonts.google.com and copy their @import line here.
   2. Put the font names into --font-display / --font-body below.
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Quicksand:wght@500;600;700&display=swap");

:root {
  --font-display: "Oswald", "Arial Narrow", sans-serif;   /* headings, name, buttons */
  --font-body: "Quicksand", "Helvetica Neue", Arial, sans-serif; /* paragraphs */
  --heading-weight: 600;
  --heading-letter-spacing: 0.01em;
  --heading-transform: none;          /* try: uppercase */
  --body-weight: 500;
  --line-height: 1.7;

  /* ------------------------------------------------------------------------
     COLOURS
     ------------------------------------------------------------------------ */
  --color-bg: #ffffff;                /* page background */
  --color-bg-alt: #f5f2fd;            /* alternate section background (About, Personal Projects) */
  --color-surface: #ffffff;           /* cards and panels */
  --color-surface-2: #efebfa;         /* tags, image placeholders */
  --color-text: #17131f;              /* main text */
  --color-text-soft: #3a3446;         /* long-form paragraph text */
  --color-muted: #6c6680;             /* secondary text (years, captions) */
  --color-border: #e5e0f0;
  --color-border-strong: #c7bee4;

  --color-header-bg: #5c36cf;         /* the purple top bar */
  --color-header-text: #ffffff;
  --color-header-muted: rgba(255, 255, 255, 0.78);

  --color-accent: #5c36cf;            /* buttons, links, highlights */
  --color-accent-hover: #4926b3;
  --color-accent-text: #ffffff;       /* text on top of the accent colour */
  --color-accent-2: #FFDC2B;          /* secondary accent */
  --color-accent-3: #FFDC2B;          /* nav underline, featured badge */
  --color-accent-4: #FFDC2B;          /* spare accent */
  --highlight: #FFDC2B;               /* heading underlines, header line, card outline */

  --color-badge-text: #17131f;        /* text on the yellow "Featured" badge */
  --color-dock-bg: #ffffff;           /* panel behind the pinned email/social icons */
  --store-btn-radius: 12px;           /* download buttons: rounded square (999px = pill) */
  --store-btn-bg: #17131f;
  --store-btn-bg-hover: #2c2540;
  --store-btn-text: #ffffff;

  --brand-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);        /* drop shadow on your name */
  --brand-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.55); /* … when hovered */

  --color-glow: rgba(92, 54, 207, 0.35);          /* button/photo glow on hover */
  --shadow-rest: 0 2px 8px rgba(30, 20, 60, 0.06);
  --shadow-hover: 0 22px 44px rgba(30, 20, 60, 0.16);
  --blob-1: rgba(92, 54, 207, 0.22);             /* drifting background blobs in the intro */
  --blob-2: rgba(255, 92, 138, 0.16);

  --radius: 14px;                     /* card / image corner rounding (0 = square) */
  --radius-small: 8px;
  --radius-button: 999px;             /* 999px = pill buttons, 8px = rounded rectangles */

  /* ------------------------------------------------------------------------
     ANIMATION
     Set any hover value to its "off" value to disable that effect everywhere.
     To turn effects on/off per device (e.g. only on mobile), use layout.css.
     ------------------------------------------------------------------------ */
  --speed-fast: 0.2s;                 /* small things: buttons, links */
  --speed: 0.35s;                     /* cards */
  --speed-slow: 0.7s;                 /* image zoom, scroll reveal */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --hover-lift: 6px;                  /* how far cards rise on hover. Off: 0px */
  --hover-lift-small: 2px;            /* how far buttons/chips rise. Off: 0px */
  --hover-zoom: 1.06;                 /* image zoom on hover. Off: 1 */
  --hover-glow: 0 8px 26px var(--color-glow); /* button glow. Off: none */
  --hover-outline: 0;                 /* extra outline on hovered cards. On: 1, off: 0 */
  --card-hover-border: var(--color-accent); /* border colour on hovered project cards */
  --card-hover-ring: 2px;             /* thickness of that border. Off: 0px */
  --logo-hover-scale: 1.12;           /* header logo grow on hover. Off: 1 */
  --store-hover-scale: 1.04;          /* store button grow on hover. Off: 1 */
  --dock-hover-scale: 1.18;           /* pinned icon grow on hover. Off: 1 */

  --reveal-distance: 24px;            /* how far content slides up as it scrolls in. Off: 0px */
  --reveal-stagger: 70ms;             /* delay between cards appearing */

  --hero-blobs: 0;                    /* drifting colour blobs behind the intro. Off: 0 */
  --blob-speed: 16s;                  /* lower = faster drift */
}

/* --------------------------------------------------------------------------
   PRESET: dark theme. Delete the two comment markers around this block
   (the slash-star above and star-slash below) to switch the whole site to dark.
   -------------------------------------------------------------------------- */
/*
:root {
  --color-bg: #0f0d16;
  --color-bg-alt: #16131f;
  --color-surface: #1c1827;
  --color-surface-2: #262133;
  --color-text: #f1eff7;
  --color-text-soft: #d4d0e0;
  --color-muted: #9993ad;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-accent: #8b6dff;
  --color-accent-hover: #a189ff;
  --color-dock-bg: #1c1827;
  --color-glow: rgba(139, 109, 255, 0.45);
  --shadow-rest: none;
  --shadow-hover: 0 22px 44px rgba(0, 0, 0, 0.5);
}
*/