/* === Next.js tokens extracted from prototype (light mode) === */ /* Safe to include in Tailwind v3 build (no v4 directives) */ :root { /* Wattif Color Scheme */ --radius: 0.625rem; --background: oklch(1 0 0); /* White */ --foreground: oklch(0.22 0.03 258); /* Wattif Dark Blue #232837 */ --card: oklch(1 0 0); --card-foreground: oklch(0.22 0.03 258); --popover: oklch(1 0 0); --popover-foreground: oklch(0.22 0.03 258); --primary: oklch(0.76 0.08 180); /* Wattif Green #86c8bc */ --primary-foreground: oklch(1 0 0); /* White */ --secondary: oklch(0.93 0.02 150); /* Wattif Light Green #EEF4F0 */ --secondary-foreground: oklch(0.22 0.03 258); /* Wattif Dark Blue */ --muted: oklch(0.93 0.02 150); --muted-foreground: oklch(0.42 0.04 190); /* Wattif Dark Green #00594c */ --accent: oklch(0.82 0.06 170); /* Wattif Light Green 3 #a1d6ca */ --accent-foreground: oklch(0.22 0.03 258); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --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); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --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); } /* === Utilities to apply Next.js design tokens in the current theme === */ /* 1) Page-level scope: add 'next-skin' class to when you want the Next style applied */ .next-skin { /* nothing here; tokens live on :root, we just scope component overrides */ } /* Buttons */ .next-skin .btn, .next-skin .button, .next-skin button, .next-skin .woocommerce a.button, .next-skin .woocommerce button.button, .next-skin .woocommerce input.button, .next-skin .woocommerce #respond input#submit { background: var(--primary); color: var(--primary-foreground); border: 1px solid color-mix(in oklab, var(--primary), black 10%); border-radius: var(--radius); padding: .625rem 1rem; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .05s ease; } .next-skin .btn:hover, .next-skin .button:hover, .next-skin button:hover, .next-skin .woocommerce a.button:hover, .next-skin .woocommerce button.button:hover, .next-skin .woocommerce input.button:hover, .next-skin .woocommerce #respond input#submit:hover { background: color-mix(in oklab, var(--primary), black 8%); } .next-skin .btn--secondary, .next-skin .button--secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: color-mix(in oklab, var(--secondary), black 10%); } /* Inputs */ .next-skin input[type=text], .next-skin input[type=email], .next-skin input[type=tel], .next-skin input[type=number], .next-skin input[type=password], .next-skin select, .next-skin textarea { background: var(--muted); color: var(--foreground); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); padding: .625rem .75rem; } .next-skin input:focus, .next-skin select:focus, .next-skin textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring), transparent 70%); } /* Cards */ .next-skin .card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: 0 1px 2px color-mix(in oklab, black, transparent 85%); } /* Layout helpers */ .next-skin .section { padding-block: clamp(2rem, 5vw, 4rem); } .next-skin .wattif-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } /* Tailwind utility classes for ergonomic token usage */ .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-muted { background-color: var(--muted); } .text-primary { color: var(--primary); } .text-muted { color: var(--muted-foreground); } .border-primary { border-color: var(--primary); } .rounded-token { border-radius: var(--radius); }