diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..48edc7a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,26 +1,90 @@ @import "tailwindcss"; :root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + /* Norway brand colors */ + --norway-red: #ef2b2d; + --norway-blue: #002768; + + /* Light theme colors */ + --background: #e9e9e9; + --background-secondary: #dedddd; + --foreground: #1a1a1a; + --foreground-secondary: #6b7280; + + /* Dark theme colors */ + --background-dark: #1e1e2e; + --background-secondary-dark: #181825; + --foreground-dark: #ffffff; + --foreground-secondary-dark: #a1a1aa; + + /* Accent colors */ + --accent-primary: var(--norway-red); + --accent-primary-light: #ff8888; + --accent-secondary: var(--norway-blue); + --accent-secondary-light: #77a9ff; + + /* Norway gradient */ + --gradient-norway: linear-gradient(64deg, var(--norway-red) 20%, #ffffff 50%, var(--norway-blue) 75%); + + /* Border colors */ + --border-light: #e5e7eb; + --border-dark: #374151; } +/* Dark mode overrides */ @media (prefers-color-scheme: dark) { :root { - --background: #0a0a0a; - --foreground: #ededed; + --background: var(--background-dark); + --background-secondary: var(--background-secondary-dark); + --foreground: var(--foreground-dark); + --foreground-secondary: var(--foreground-secondary-dark); } } +/* Tailwind theme configuration */ +@theme inline { + --color-background: var(--background); + --color-background-secondary: var(--background-secondary); + --color-foreground: var(--foreground); + --color-foreground-secondary: var(--foreground-secondary); + --color-accent-primary: var(--accent-primary); + --color-accent-primary-light: var(--accent-primary-light); + --color-accent-secondary: var(--accent-secondary); + --color-accent-secondary-light: var(--accent-secondary-light); + --color-border: var(--border-light); + --color-norway-gradient: var(--gradient-norway); +} + +/* Dark mode border color */ +@media (prefers-color-scheme: dark) { + @theme inline { + --color-border: var(--border-dark); + } +} + +::selection { + @apply bg-accent-primary; + @apply text-white; +} + body { - background: var(--background); - color: var(--foreground); + @apply bg-background; + @apply text-foreground; font-family: Arial, Helvetica, sans-serif; } + +a { + @apply text-accent-primary; + @apply duration-200; + @apply ease-in; +} + +a:hover { + @apply text-accent-primary-light; +} + +.border-norway { + @apply border-b-2; + @apply border-transparent; + border-image: var(--gradient-norway) 1; +}