gallery/app/globals.css

@import "tailwindcss";

/* Origin UI CSS Variables - matching hanzo.ai */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.55 0.01 286);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.637 0.237 25.331);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.92 0 286);
  --input: oklch(0.871 0.006 286.286);
  --ring: oklch(0.871 0.006 286.286);
  --radius: 0.625rem;

  /* Hanzo brand colors - monochrome */
  --brand: #e4e4e7;
  --brand-foreground: #09090b;
  --brand-muted: #d4d4d8;
  --brand-secondary: #f4f4f5;

  /* Typography scales */
  --font-scale: 1;
  --line-height-scale: 1;
  --letter-spacing-scale: 0em;
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.141 0.005 285.823);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.141 0.005 285.823);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.21 0.006 285.885);
  --muted-foreground: oklch(0.65 0.01 286);
  --accent: oklch(0.21 0.006 285.885);
  --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.274 0.006 286.033);
  --input: oklch(0.274 0.006 286.033);
  --ring: oklch(0.442 0.017 285.786);

  /* Hanzo brand colors - monochrome */
  --brand: #e4e4e7;
  --brand-foreground: #09090b;
  --brand-muted: #d4d4d8;
  --brand-secondary: #f4f4f5;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand: var(--brand);
  --color-brand-muted: var(--brand-muted);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), system-ui, sans-serif;
}

/* Typography based on golden ratio - matching hanzo.ai */
h1 {
  font-size: calc(2.618rem * var(--font-scale));
  line-height: calc(1.15 * var(--line-height-scale));
  letter-spacing: calc(-0.025em + var(--letter-spacing-scale));
  font-weight: 500;
}

h2 {
  font-size: calc(1.618rem * var(--font-scale));
  line-height: calc(1.2 * var(--line-height-scale));
  letter-spacing: calc(-0.025em + var(--letter-spacing-scale));
  font-weight: 600;
}

h3 {
  font-size: calc(1.25rem * var(--font-scale));
  line-height: calc(1.3 * var(--line-height-scale));
  letter-spacing: calc(-0.025em + var(--letter-spacing-scale));
  font-weight: 500;
}

/* Text gradient - Linear-inspired monochrome */
.text-gradient {
  background: linear-gradient(to bottom, white, rgba(255,255,255,0.9), rgba(255,255,255,0.5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass design patterns */
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
}

.glass-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  transition: background-color 0.2s;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Vercel-inspired card */
.vercel-card {
  background: #0a0a0a;
  border: 1px solid #262626;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s;
}

.vercel-card:hover {
  border-color: #404040;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* Brand button */
.btn-brand {
  background: var(--brand);
  color: var(--brand-foreground);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-brand:hover {
  background: var(--brand-muted);
}

/* Secondary button */
.btn-secondary {
  background: transparent;
  color: white;
  border: 1px solid #404040;
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #525252;
}

/* Hero glow effect */
.hero-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 70%);
  opacity: 0.15;
  filter: blur(100px);
  pointer-events: none;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out forwards;
}

/* Subtle hover */
.subtle-hover {
  transition: all 0.3s ease;
}

.subtle-hover:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}