/* ============================================================
   cecetaca Design System — Colors & Type
   Derived from cecetaca.com (Hugo Blox / Hugo Academic theme),
   pivoted: purple/lilac is now the primary brand. Cornell red
   is preserved as a secondary, university-only accent.
   Type stack: Montserrat + Roboto + Fira Code.
   ============================================================ */

/* ---------- Webfonts (Google Fonts) ----------
   The original site loads these directly from Google Fonts:
     family=Montserrat:wght@400;700
     family=Roboto:wght@400;700
     family=Roboto+Mono
   Mirror that here so cards & UI kits render consistently.
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand color ----------
     The brand is now purple/lilac. Cornell red is kept as a
     SECONDARY accent for university-related contexts only
     (CV header, Cornell affiliation chips, transcript pages).
     Default --brand maps to lilac so generic components pick
     up the new primary automatically.
  */
  --brand:            #8C5CFF;     /* lilac-500 — primary brand */
  --brand-hover:      #5B2EC9;     /* lilac-700 */
  --brand-soft:       #E2D2FF;     /* lilac-100 — chips, hovers */
  --brand-tint-bg:    #F4ECFF;     /* lilac-50 — very faint wash */

  /* Cornell red — demoted to a university-only accent.
     Reach for these tokens (not --brand) when the surface is
     specifically about Cornell, ECE, or transcripts. */
  --cornell:          #B31B1B;
  --cornell-hover:    #8E1616;
  --cornell-soft:     #E9C5C5;
  --cornell-tint-bg:  #FBF0F0;

  /* Closca-era deep blue (used on the iOS app screenshot in
     featured imagery — useful as a secondary/accent for tech)*/
  --accent-blue:      #1E2A78;
  --accent-blue-soft: #C8CCE5;

  /* ---------- Lilac / Radial-Purple track ----------
     Sampled from the macOS "Radial Purple" wallpaper the
     user flagged as part of the brand vibe. Use as an
     accent / hero treatment for high-saturation feature
     surfaces (book covers, slide decks, iOS-dev pages).
     Lilac IS the brand now — these tokens give you the
     ladder; --brand maps to lilac-500.                       */
  --lilac-50:   #F4ECFF;   /* near-white wash */
  --lilac-100:  #E2D2FF;   /* highlight, soft pill bg */
  --lilac-300:  #BFA0FF;   /* the bright bloom */
  --lilac-500:  #8C5CFF;   /* mid lilac, primary accent */
  --lilac-700:  #5B2EC9;   /* shadowed petal */
  --lilac-900:  #2A0E5C;   /* deepest aubergine */
  --lilac-ink:  #120429;   /* near-black core, text on lilac bg */
  /* The signature gradient — radial bloom, off-axis,
     pulled directly from the wallpaper. Use for hero
     backdrops, section dividers, slide title plates.       */
  --lilac-radial:
    radial-gradient(
      120% 110% at 92% 100%,
      var(--lilac-300) 0%,
      var(--lilac-500) 22%,
      var(--lilac-700) 48%,
      var(--lilac-900) 72%,
      var(--lilac-ink) 100%
    );
  --lilac-linear:
    linear-gradient(135deg, var(--lilac-900) 0%, var(--lilac-500) 60%, var(--lilac-300) 100%);

  /* ---------- Liquid Glass ----------
     Translucent, blurred panels that float above rich
     backgrounds (always pair with --lilac-radial or
     photography — never plain white). The "specular" tokens
     are the highlight + edge that sells the glass material.
     Compose:
        background: var(--glass-fill);
        backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-stroke);
        box-shadow: var(--glass-shadow), var(--glass-inner);
  */
  --glass-fill:        rgba(255, 255, 255, 0.12);
  --glass-fill-strong: rgba(255, 255, 255, 0.22);
  --glass-fill-dark:   rgba(20, 8, 40, 0.28);    /* on lighter bgs */
  --glass-stroke:      rgba(255, 255, 255, 0.28);
  --glass-stroke-soft: rgba(255, 255, 255, 0.16);
  --glass-blur:        blur(24px) saturate(160%);
  --glass-blur-strong: blur(40px) saturate(180%);
  --glass-shadow:      0 12px 40px rgba(20, 8, 40, 0.28);
  --glass-inner:       inset 0 1px 0 rgba(255, 255, 255, 0.45),
                       inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  --glass-tint-lilac:  rgba(140, 92, 255, 0.18); /* color cast option */

  /* ---------- Cocoa / macOS track ----------
     macOS-native surfaces: layered window chrome, sidebar
     vibrancy, source-list selection, sheet panels, and a
     subtle Liquid Glass material for popovers and titlebars.

     Restraint is the rule. Glass appears at chrome edges
     (titlebar, sidebar, popover), not as a default panel
     fill. Solid `--cocoa-content` is the everyday surface;
     glass is the exception, always sitting *on top of*
     content (photo, lilac plate) — never floating in white.
  */
  /* Light (System / Aqua) */
  --cocoa-window:       #ECECEC;        /* window chrome / titlebar base */
  --cocoa-content:      #FFFFFF;        /* main content area */
  --cocoa-sidebar:      #F2F2F2;        /* source-list bg (NSVisualEffect sidebar) */
  --cocoa-sidebar-tint: rgba(120, 120, 128, 0.08);
  --cocoa-control:      #FFFFFF;        /* button/textfield resting fill */
  --cocoa-control-hover:#F5F5F5;
  --cocoa-separator:    rgba(60, 60, 67, 0.12);   /* hairline */
  --cocoa-fill-quat:    rgba(120, 120, 128, 0.12);/* hover-state fills */
  --cocoa-fill-tert:    rgba(120, 120, 128, 0.18);
  --cocoa-shadow-window:0 0 0 0.5px rgba(0,0,0,0.18), 0 22px 70px -10px rgba(0,0,0,0.30);
  --cocoa-shadow-popover:0 0 0 0.5px rgba(0,0,0,0.10), 0 10px 32px rgba(0,0,0,0.18);

  /* Dark (System / Aqua dark) */
  --cocoa-window-dark:    #2A2A2A;
  --cocoa-content-dark:   #1E1E1E;
  --cocoa-sidebar-dark:   #252525;
  --cocoa-control-dark:   #3A3A3C;
  --cocoa-separator-dark: rgba(255, 255, 255, 0.10);

  /* Accent (system blue–lilac hybrid). Cocoa's "system blue"
     is #007AFF; we shift toward lilac to hold the brand. */
  --cocoa-accent:        var(--lilac-500);   /* lilac as the system accent */
  --cocoa-accent-pressed:var(--lilac-700);
  --cocoa-accent-fg:     #FFFFFF;
  --cocoa-link:          #5B2EC9;            /* WebKit link in light */
  --cocoa-link-dark:     #BFA0FF;
  --cocoa-selection:     rgba(140, 92, 255, 0.22);

  /* Destructive (system red) */
  --cocoa-destructive:   #FF3B30;
  --cocoa-destructive-fg:#FFFFFF;

  /* ---------- Subtle Liquid Glass (Cocoa-restrained) ----------
     Lower opacity than the lilac glass plates; thinner blur.
     Use only over textured backgrounds — photo, lilac, sidebar
     vibrancy. Never over flat white.                          */
  --cocoa-glass-bg:      rgba(255, 255, 255, 0.55);
  --cocoa-glass-bg-dark: rgba(40, 40, 42, 0.55);
  --cocoa-glass-blur:    blur(20px) saturate(160%);
  --cocoa-glass-stroke:  inset 0 0 0 0.5px rgba(255,255,255,0.55),
                         inset 0 0.5px 0 rgba(255,255,255,0.85);
  --cocoa-glass-shadow:  0 1px 2px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.10);

  /* ---------- Neutrals ----------
     Hugo Academic uses Bootstrap-derived greys plus a
     near-black body color. Light-on-light surfaces with
     thin grey borders dominate.                              */
  --bg:               #FFFFFF;
  --bg-alt:           #F7F7F7;     /* even-numbered home sections */
  --bg-muted:         #F1F1F1;     /* card hover, code background */
  --surface:          #FFFFFF;     /* cards, dropdowns */
  --border:           #E6E6E6;     /* card outline */
  --border-strong:    #CFCFCF;

  --fg:               #2B2B2B;     /* body text */
  --fg-muted:         #6C757D;     /* Bootstrap text-muted */
  --fg-subtle:        #8A8A8A;
  --fg-on-brand:      #FFFFFF;

  /* ---------- Semantic ---------- */
  --link:             var(--brand);
  --link-hover:       var(--brand-hover);
  --focus-ring:       rgba(140, 92, 255, 0.40);

  --success:          #2E7D32;
  --warning:          #C77700;
  --danger:           #E53935;     /* generic red — distinct from --cornell */
  --info:             #1E2A78;

  /* ---------- Typography families ----------
     Display/headings: Montserrat (geometric humanist sans)
     Body:             Roboto       (workhorse sans)
     Mono / code:      Roboto Mono                              */
  --font-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Fira Code", "FiraCode Nerd Font", "Roboto Mono",
                  SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", monospace;

  /* ---------- Type scale ----------
     Calibrated to the academic homepage: large h1 section
     headings, modest body, generous line-height.            */
  --fs-display: 3.25rem;   /* portrait name h2 */
  --fs-h1:      2.25rem;   /* section headings */
  --fs-h2:      1.625rem;
  --fs-h3:      1.25rem;
  --fs-h4:      1.125rem;
  --fs-body:    1rem;      /* 16px */
  --fs-small:   0.875rem;
  --fs-meta:    0.8125rem; /* article-metadata, badges */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.08em;  /* small caps / section-subheading */

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Section padding (Hugo Academic uses ~6rem vertical on home sections) */
  --section-py: 96px;

  /* ---------- Radii ----------
     Calibrated to macOS Sequoia: window 10px, sheets 12px,
     popovers 12px, controls 6–8px, large hero plates 28px.
     Pills stay full circles. Avoid sharp 0/2px corners.
  */
  --radius-xs: 4px;
  --radius-sm: 8px;       /* buttons, inputs, code chips */
  --radius-md: 14px;      /* small cards, list rows */
  --radius-lg: 20px;      /* panels, large cards, modals */
  --radius-xl: 28px;      /* hero plates, glass docks */
  --radius-2xl: 36px;     /* full-bleed feature surfaces */
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ---------- Shadows ----------
     The original cards are nearly flat, with a hairline
     border instead of shadow. Hover lifts very slightly.    */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.18);

  /* ---------- Transitions ---------- */
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1); /* ease — Bootstrap default */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --container: 1140px;     /* Bootstrap container-xl */
  --header-h:  64px;
  --content-w: 720px;      /* article column */
}

/* ============================================================
   Semantic element styles — apply to typical HTML so cards
   and recreations look consistent without per-page CSS.
   ============================================================ */

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 0.5em 0;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); }

p {
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

/* Section sub-heading: small, uppercase, tracked.
   This is the signature label style on the site
   (.section-subheading) — used over portrait blocks,
   experience titles, and publication titles.            */
.section-subheading,
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Article-metadata: small, muted, often inline with middot dividers. */
.article-metadata,
.meta {
  font-size: var(--fs-meta);
  color: var(--fg-muted);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-muted);
  padding: 0.15em 0.35em;
  border-radius: var(--radius-xs);
}
pre {
  background: var(--bg-muted);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* ============================================================
   Utility classes
   ============================================================ */

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.text-muted { color: var(--fg-muted); }
.text-brand { color: var(--brand); }
.bg-alt    { background: var(--bg-alt); }

/* The site uses a "middot divider" between meta items */
.middot-divider::before { content: "·"; padding: 0 0.4em; color: var(--fg-subtle); }

/* ============================================================
   Liquid Glass utilities
   Always layer over a rich backdrop (lilac gradient,
   photography). Never over plain white — there's nothing
   to blur and the highlight goes invisible.
   ============================================================ */

.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  color: white;
}
.glass--strong {
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
          backdrop-filter: var(--glass-blur-strong);
}
.glass--tint {
  background: linear-gradient(180deg, var(--glass-tint-lilac), var(--glass-fill));
}
.glass--pill {
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}

/* ============================================================
   Dark theme — applied via [data-theme="dark"] on <html>.
   Tokens shift; component CSS picks them up automatically.
   ============================================================ */
:root[data-theme="dark"] {
  --bg:               #100A1F;
  --bg-alt:           #18112B;
  --bg-muted:         #221937;
  --surface:          #1B1432;
  --border:           #2C2347;
  --border-strong:    #3A2F5A;

  --fg:               #F4EFFF;
  --fg-muted:         #C7BEDF;
  --fg-subtle:        #9F95B8;

  --brand:            #BFA0FF;
  --brand-hover:      #D9C5FF;
  --brand-soft:       #3A2566;
  --brand-tint-bg:    #261942;

  --link:             var(--brand);
  --link-hover:       var(--brand-hover);
  --focus-ring:       rgba(191,160,255,0.45);

  --shadow-card:       0 1px 2px rgba(0,0,0,0.40);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-modal:      0 20px 60px rgba(0,0,0,0.65);

  --cocoa-window:       #2A2A2A;
  --cocoa-content:      #1E1E1E;
  --cocoa-sidebar:      #252525;
  --cocoa-control:      #3A3A3C;
  --cocoa-separator:    rgba(255,255,255,0.10);
  --cocoa-link:         var(--cocoa-link-dark);
}