/* Shared design tokens for Varun's portfolio
   Two themes via [data-theme] on :root. Light (oat) is default. */

:root,
:root[data-theme="light"] {
  --bg:        #F0ECDF;   /* light oat — cool-leaning, less yellow */
  --bg-2:      #E5DFCC;   /* slight elevation */
  --surface:   #FFFFFF;
  --surface-2: #F8F5EC;
  --fg:        #1F1D1A;   /* cool warm ink */
  --fg-2:      #4A4640;
  --fg-3:      #8C8678;

  /* Accent is now sage. Var name kept as --coral so component code is stable. */
  --coral:     oklch(0.55 0.11 152);
  --coral-2:   oklch(0.46 0.10 152);
  --moss:      oklch(0.42 0.09 140);
  --line:      rgba(31, 29, 26, 0.10);
  --line-2:    rgba(31, 29, 26, 0.05);

  /* placeholder image (subtle oat stripes) */
  --ph-bg:       #E5DECB;
  --ph-stripe-a: rgba(31, 29, 26, 0.04);
  --ph-stripe-b: rgba(31, 29, 26, 0.08);
  --ph-border:   rgba(31, 29, 26, 0.18);
  --ph-label-bg: rgba(255, 255, 255, 0.75);
  --ph-label-fg: rgba(31, 29, 26, 0.7);

  --map-dot:      rgba(31, 29, 26, 0.22);
  --scrim:        rgba(255, 255, 255, 0.6);
  --scrim-strong: rgba(240, 236, 223, 0.92);

  /* Globe in light: warm tan sphere with darker dots */
  --globe-c1:    #D5C9A8;
  --globe-c2:    #B0A48A;
  --globe-c3:    #7C7159;
  --globe-shadow: rgba(45, 35, 20, 0.30);
  --globe-dot:    rgba(31, 29, 26, 0.32);
  --globe-line:   rgba(31, 29, 26, 0.16);
  --shadow-card:     0 8px 28px rgba(45, 35, 20, 0.10);
  --shadow-floating: 0 12px 40px rgba(45, 35, 20, 0.18);

  /* sky for the mini-game — cool, airy */
  --sky-top:    #D2DDDD;
  --sky-bot:    #EDE7D5;
  --hill-far:   #B5B698;
  --hill-near:  #8FA078;
  --grass:      #6F8A5C;
  --grass-dk:   #4F6D43;
  --soil:       #856B4A;
  --soil-dk:    #5A4630;
}

:root[data-theme="dark"] {
  --bg:        #0E0D0B;
  --bg-2:      #1A1714;
  --surface:   #1A1714;
  --surface-2: #26211C;
  --fg:        #ECE7D6;       /* matches the light theme's oat */
  --fg-2:      #D6D0BE;
  --fg-3:      #92897A;
  --coral:     oklch(0.72 0.13 152);
  --coral-2:   oklch(0.62 0.12 152);
  --moss:      oklch(0.60 0.10 140);
  --line:      rgba(236, 231, 214, 0.12);
  --line-2:    rgba(236, 231, 214, 0.06);

  --ph-bg:       #1F1A15;
  --ph-stripe-a: rgba(236, 231, 214, 0.04);
  --ph-stripe-b: rgba(236, 231, 214, 0.08);
  --ph-border:   rgba(236, 231, 214, 0.18);
  --ph-label-bg: rgba(14, 13, 11, 0.65);
  --ph-label-fg: rgba(236, 231, 214, 0.85);

  --map-dot:      rgba(236, 231, 214, 0.18);
  --scrim:        rgba(14, 13, 11, 0.6);
  --scrim-strong: rgba(14, 13, 11, 0.9);

  --globe-c1:    #2A2018;
  --globe-c2:    #14110D;
  --globe-c3:    #0A0807;
  --globe-shadow: rgba(0, 0, 0, 0.7);
  --globe-dot:    rgba(236, 231, 214, 0.18);
  --globe-line:   rgba(236, 231, 214, 0.08);
  --shadow-card:     0 8px 28px rgba(0, 0, 0, 0.4);
  --shadow-floating: 0 12px 40px rgba(0, 0, 0, 0.6);

  --sky-top:    #1A2030;
  --sky-bot:    #14110D;
  --hill-far:   #2A2418;
  --hill-near:  #1F2A1A;
  --grass:      #3A5A30;
  --grass-dk:   #243A1E;
  --soil:       #2F2118;
  --soil-dk:    #1A110A;
}

:root {
  --f-display: 'Instrument Serif', 'Times New Roman', serif;
  --f-ui:      'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Menlo', monospace;
}

.ph-img {
  background:
    repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 14px, var(--ph-stripe-b) 14px 28px),
    var(--ph-bg);
  position: relative; overflow: hidden;
  color: var(--ph-label-fg);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.ph-img::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px dashed var(--ph-border); pointer-events: none;
}
.ph-img .ph-label {
  position: relative; z-index: 1; padding: 6px 10px;
  background: var(--ph-label-bg); border: 1px solid var(--ph-border);
  border-radius: 999px; white-space: nowrap;
}

.bg-dots {
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 16px 16px;
}

.frame {
  width: 100%; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-ui);
  position: relative; overflow: hidden;
}
.frame * { box-sizing: border-box; }