/* ==========================================================================
   Brand Variables - Puunjalostusinsinöörit
   ==========================================================================
   All brand tokens as CSS custom properties.
   Include this file first, before other custom styles.
   ========================================================================== */

:root {
  /* ========================================================================
     COLORS
     ======================================================================== */

  /* Primary colors (päävärit) */
  --color-primary: #193e70;           /* Tumman sininen - RGB 26|62|112, Pantone 294 */
  --color-secondary: #c0915d;         /* Ruskea - RGB 192|146|93, Pantone 729 */

  /* Additional color (lisäväri) */
  --color-tertiary: #93ccc0;          /* Vaalea turkoosi - RGB 148|205|193 */

  /* Accent colors (huomiovärit) */
  --color-primary-accent: #7fc135;    /* Vihreä - RGB 127|193|53 */
  --color-secondary-accent: #ff4558;  /* Punainen - RGB 255|69|88 */
  --color-tertiary-accent: #ffa100;   /* Oranssi - RGB 255|161|0 */

  /* Legacy aliases */
  --color-red: var(--color-secondary-accent);
  --color-orange: var(--color-tertiary-accent);
  --color-green: var(--color-primary-accent);

  /* Primary variants */
  --color-primary-dark: #14325a;
  --color-primary-darker: #0d1f38;
  --color-primary-light: #d1d8e2;     /* 20% tint */

  /* Secondary variants */
  --color-secondary-dark: #a47540;
  --color-secondary-light: #f2ebe3;   /* 20% tint */

  /* Tertiary variants */
  --color-tertiary-dark: #63b5a4;
  --color-tertiary-light: #eaf5f3;    /* 20% tint */

  /* Accent variants */
  --color-primary-accent-dark: #5a9922;    /* Vihreä darker */
  --color-secondary-accent-dark: #e62d42;  /* Punainen darker */
  --color-tertiary-accent-dark: #cc8200;   /* Oranssi darker */

  /* Accent variants (20% tints) */
  --color-primary-accent-light: #e5f2d6;   /* Vihreä 20% */
  --color-secondary-accent-light: #ffd9dd; /* Punainen 20% */
  --color-tertiary-accent-light: #ffeccc;  /* Oranssi 20% */

  /* Light variants dark (for hover on light backgrounds) */
  --color-primary-light-dark: #b8c4d4;
  --color-secondary-light-dark: #e8ddd1;
  --color-tertiary-light-dark: #d4ebe6;
  --color-primary-accent-light-dark: #d4e8be;
  --color-secondary-accent-light-dark: #ffbfc6;
  --color-tertiary-accent-light-dark: #ffe0a6;

  /* Legacy aliases */
  --color-red-light: var(--color-secondary-accent-light);
  --color-orange-light: var(--color-tertiary-accent-light);
  --color-green-light: var(--color-primary-accent-light);

  /* Neutrals */
  --color-white: #fff;
  --color-black: #0a0a0a;
  --color-gray-100: #f9f9f9;
  --color-gray-200: #f2f2f2;
  --color-gray-300: #e6e6e6;
  --color-gray-400: #dfdfdf;
  --color-gray-500: #cacaca;
  --color-gray-600: #8a8a8a;
  --color-gray-700: #777;

  /* Semantic colors */
  --color-success: #3adb76;
  --color-warning: #ffae00;
  --color-alert: #ec5840;

  /* Text colors */
  --color-text: var(--color-primary);
  --color-text-muted: var(--color-gray-700);
  --color-text-light: var(--color-white);

  /* Link colors */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);


  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  /* Font families */
  --font-primary: "Raleway", Helvetica, Roboto, Arial, sans-serif;
  --font-display: "Philosopher", Helvetica, Roboto, Arial, sans-serif;
  --font-mono: Consolas, "Liberation Mono", Courier, monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.4375rem;
  --font-size-2xl: 1.625rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.625rem;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;


  /* ========================================================================
     SPACING
     ======================================================================== */

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;


  /* ========================================================================
     LAYOUT
     ======================================================================== */

  --max-width: calc(1200px + 4rem);  /* 1264px - content area is 1200px after 2rem padding on each side */
  --content-width: 1200px;
  --container-padding: 2rem;
  --container-padding-mobile: 1rem;
  --border-radius: 3px;
  --transition-speed: 0.3s;
}


/* ==========================================================================
   TYPOGRAPHY OVERRIDES
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-style: normal;
  color: inherit;
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-snug);
}

h1 {
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media screen and (max-width: 50em) {
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
}