/*
Theme Name: Barbara Nery Design Portfolio
Description: Design Portfolio
Version: 2.0.25
Author: Barbara Nery
Text Domain: barbara-nery
*/



:root {
  --font-size: 14px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  
  /* Y2K Colors */
  --y2k-peach: #FFCDB2;
  --y2k-mint: #B5EAD7;
  --y2k-lavender: #C7CEEA;
  --y2k-blue: #A0C4FF;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}





/* Y2K Custom Cursor */
.pixel-cursor {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="white" stroke="black" stroke-width="2"/><rect x="2" y="2" width="12" height="12" fill="black"/><rect x="4" y="4" width="8" height="8" fill="white"/></svg>'), pointer;
}

/* Y2K Drop Shadow Utility */
.y2k-shadow {
  box-shadow: 4px 4px 0px 0px #000;
}

.y2k-shadow-sm {
  box-shadow: 2px 2px 0px 0px #000;
}

.y2k-shadow-lg {
  box-shadow: 6px 6px 0px 0px #000;
}

/* Y2K Thick Outline */
.y2k-outline {
  border: 3px solid #000;
}

.y2k-outline-thin {
  border: 2px solid #000;
}

/* Speech Bubble */
.speech-bubble {
  position: relative;
  background: white;
  border: 3px solid #000;
  border-radius: 0;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid white;
}

.speech-bubble:before {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 17px;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid black;
}

/**
 * Base typography with Y2K styling
 */
@layer base {
  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
    h1 {
      font-size: var(--text-2xl);
      font-weight: 700;
      line-height: 1.2;
      font-family: 'Space Grotesk', monospace, sans-serif;
      text-transform: uppercase;
      letter-spacing: -0.02em;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: 600;
      line-height: 1.3;
      font-family: 'Space Grotesk', monospace, sans-serif;
      text-transform: uppercase;
      letter-spacing: -0.01em;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: 600;
      line-height: 1.4;
      font-family: 'Space Grotesk', monospace, sans-serif;
      text-transform: uppercase;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: 500;
      line-height: 1.4;
      font-family: 'Space Grotesk', monospace, sans-serif;
    }

    p {
      font-size: var(--text-base);
      font-weight: 400;
      line-height: 1.6;
      font-family: 'JetBrains Mono', monospace;
    }

    label {
      font-size: var(--text-base);
      font-weight: 500;
      line-height: 1.4;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    button {
      font-size: var(--text-base);
      font-weight: 600;
      line-height: 1.4;
      font-family: 'Space Grotesk', monospace, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    input, textarea, select {
      font-size: var(--text-base);
      font-weight: 400;
      line-height: 1.4;
      font-family: 'JetBrains Mono', monospace;
    }
  }
}

html {
  font-size: var(--font-size);
}