/*
Theme Name: Martykon Theme
Theme URI: https://martykon.pl
Author: Martykon Team
Description: Prosty, zoptymalizowany motyw pod Elementor wdrażający projekt Martykon z gotowymi zmiennymi systemowymi i konfiguracją Tailwind.
Version: 1.0.0
Text Domain: martykon
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=PT+Sans:wght@400;700&family=Inter:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: #904d00;
    --color-primary-container: #ff8c00;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #623200;

    --color-secondary: #6b5b50;
    --color-secondary-container: #f1dccd;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #705f54;

    --color-background: #faf9f8;
    --color-on-background: #1a1c1c;
    --color-surface: #faf9f8;
    --color-on-surface: #1a1c1c;
    --color-surface-variant: #e3e2e1;
    --color-on-surface-variant: #564334;
    
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f4f3f2;
    --color-surface-container: #eeeeed;
    --color-surface-container-high: #e9e8e7;
    --color-surface-container-highest: #e3e2e1;

    --color-outline: #897362;
    --color-outline-variant: #ddc1ae;
  }

  body {
    background-color: var(--color-background);
    color: var(--color-on-surface);
    font-family: 'PT Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
  }

  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
}

@layer components {
  .btn-primary {
    @apply bg-[var(--color-primary-container)] text-white px-10 py-5 text-sm font-bold uppercase tracking-widest hover:scale-105 hover:bg-[var(--color-primary)] transition-all duration-300;
    font-family: 'Oswald', sans-serif;
    border-radius: 0px !important;
  }

  .btn-secondary {
    @apply border-2 border-[var(--color-outline)] text-on-surface px-10 py-5 text-sm font-bold uppercase tracking-widest hover:bg-[var(--color-surface-container-highest)] transition-colors duration-300;
    font-family: 'Oswald', sans-serif;
    border-radius: 0px !important;
  }

  .cta-gradient {
    background: linear-gradient(45deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
  }

  .headline-font {
    font-family: 'Oswald', sans-serif;
  }
}

@layer utilities {
  .sharp {
    border-radius: 0px !important;
  }
}