/*
 * Punkt Design System — Design Tokens
 *
 * Extracted from punkt.oslo.kommune.no (Git commit: 05685b33)
 * Punkt CDN: https://punkt-cdn.oslo.kommune.no/latest/
 *
 * These tokens are hand-extracted CSS custom properties from the Punkt design
 * system by Oslo kommune. They are used to theme the Zensical documentation
 * site to match Oslo kommune's visual identity.
 */

/* ============================================================================
 * Oslo Sans — @font-face declarations
 * CDN: https://punkt-cdn.oslo.kommune.no/latest/fonts/
 * ========================================================================= */

@font-face {
  font-display: swap;
  font-family: "Oslo Sans";
  font-style: normal;
  font-weight: 300;
  src:
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Light.woff2")
      format("woff2"),
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Light.woff")
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Oslo Sans";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Regular.woff2")
      format("woff2"),
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Regular.woff")
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Oslo Sans";
  font-style: italic;
  font-weight: 400;
  src:
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-RegularItalic.woff2")
      format("woff2"),
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-RegularItalic.woff")
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Oslo Sans";
  font-style: normal;
  font-weight: 500;
  src:
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Medium.woff2")
      format("woff2"),
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Medium.woff")
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Oslo Sans";
  font-style: normal;
  font-weight: 700;
  src:
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Bold.woff2")
      format("woff2"),
    url("https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Bold.woff")
      format("woff");
}

/* ============================================================================
 * Brand colors
 * ========================================================================= */

:root {
  /* Blue */
  --pkt-color-brand-blue-100: #f1fdff;
  --pkt-color-brand-blue-200: #e5fcff;
  --pkt-color-brand-blue-300: #d1f9ff;
  --pkt-color-brand-blue-500: #b3f5ff;
  --pkt-color-brand-blue-1000: #6fe9ff;
  --pkt-color-brand-dark-blue-700: #6a698b;
  --pkt-color-brand-dark-blue-1000: #2a2859;
  --pkt-color-brand-warm-blue-1000: #1f42aa;

  /* Green */
  --pkt-color-brand-green-400: #c7fde9;
  --pkt-color-brand-green-1000: #43f8b6;
  --pkt-color-brand-light-green-400: #e5ffe6;
  --pkt-color-brand-light-green-1000: #c7f6c9;
  --pkt-color-brand-dark-green-1000: #034b45;

  /* Yellow */
  --pkt-color-brand-yellow-500: #ffe7bc;
  --pkt-color-brand-yellow-1000: #f9c66b;

  /* Red */
  --pkt-color-brand-red-100: #fff2f1;
  --pkt-color-brand-red-400: #ffdfdc;
  --pkt-color-brand-red-600: #ffb4ac;
  --pkt-color-brand-red-1000: #ff8274;

  /* Beige */
  --pkt-color-brand-light-beige-1000: #f8f0dd;
  --pkt-color-brand-dark-beige-1000: #d0bfae;

  /* Neutrals */
  --pkt-color-brand-neutrals-white: #ffffff;
  --pkt-color-brand-neutrals-100: #f9f9f9;
  --pkt-color-brand-neutrals-200: #f2f2f2;
  --pkt-color-brand-neutrals-1000: #2c2c2c;
  --pkt-color-brand-neutrals-black: #000000;

  /* Purple */
  --pkt-color-brand-purple-1000: #e0adff;

  /* Grays */
  --pkt-color-grays-100: #e6e6e6;
  --pkt-color-grays-200: #cccccc;
  --pkt-color-grays-300: #b3b3b3;
  --pkt-color-grays-400: #9a9a9a;
  --pkt-color-grays-500: #808080;
  --pkt-color-grays-600: #666666;
  --pkt-color-grays-700: #4d4d4d;
  --pkt-color-grays-800: #333333;
  --pkt-color-grays-900: #1a1a1a;
  --pkt-color-grays-1000: #2c2c2c;

  /* ============================================================================
   * Semantic colors
   * ========================================================================= */

  /* Background */
  --pkt-color-background-card: var(--pkt-color-brand-neutrals-white);
  --pkt-color-background-default: var(--pkt-color-brand-neutrals-white);
  --pkt-color-background-subtle: var(--pkt-color-brand-neutrals-100);

  /* Borders */
  --pkt-color-border-default: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-border-beige: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-border-blue: var(--pkt-color-brand-blue-1000);
  --pkt-color-border-gray: var(--pkt-color-grays-200);
  --pkt-color-border-green: var(--pkt-color-brand-green-1000);
  --pkt-color-border-light-beige: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-border-red: var(--pkt-color-brand-red-1000);
  --pkt-color-border-subtle: var(--pkt-color-brand-neutrals-200);
  --pkt-color-border-yellow: var(--pkt-color-brand-yellow-1000);
  --pkt-color-border-states-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-border-states-disabled: var(--pkt-color-grays-300);
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
  --pkt-color-border-states-hover: var(--pkt-color-brand-warm-blue-1000);

  /* Surface */
  --pkt-color-surface-default-faded-green: var(--pkt-color-brand-light-green-400);
  --pkt-color-surface-default-faded-red: var(--pkt-color-brand-red-400);
  --pkt-color-surface-default-gray: var(--pkt-color-brand-neutrals-100);
  --pkt-color-surface-default-light-beige: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-surface-default-light-blue: var(--pkt-color-brand-blue-300);
  --pkt-color-surface-default-light-green: var(--pkt-color-brand-green-400);
  --pkt-color-surface-default-red: var(--pkt-color-brand-red-600);
  --pkt-color-surface-default-yellow: var(--pkt-color-brand-yellow-500);
  --pkt-color-surface-strong-beige: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-surface-strong-blue: var(--pkt-color-brand-blue-1000);
  --pkt-color-surface-strong-dark-blue: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-surface-strong-dark-green: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-surface-strong-gray: var(--pkt-color-brand-neutrals-200);
  --pkt-color-surface-strong-green: var(--pkt-color-brand-green-1000);
  --pkt-color-surface-strong-light-green: var(--pkt-color-brand-light-green-1000);
  --pkt-color-surface-strong-red: var(--pkt-color-brand-red-1000);
  --pkt-color-surface-strong-yellow: var(--pkt-color-brand-yellow-1000);
  --pkt-color-surface-subtle-light-blue: var(--pkt-color-brand-blue-200);
  --pkt-color-surface-subtle-light-red: var(--pkt-color-brand-red-100);
  --pkt-color-surface-subtle-pale-blue: var(--pkt-color-brand-blue-100);
  --pkt-color-surface-subtle-white: var(--pkt-color-brand-neutrals-white);

  /* Text */
  --pkt-color-text-body-dark: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-text-body-default: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-text-body-light: var(--pkt-color-brand-neutrals-white);
  --pkt-color-text-placeholder: var(--pkt-color-grays-600);
  --pkt-color-text-action-disabled: var(--pkt-color-grays-600);
  --pkt-color-text-action-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-text-action-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-text-action-normal: var(--pkt-color-brand-dark-blue-1000);

  /* ============================================================================
   * Spacing scale (8-point grid)
   * ========================================================================= */
  --pkt-spacing-0: 0rem;
  --pkt-spacing-2: 0.125rem;
  --pkt-spacing-4: 0.25rem;
  --pkt-spacing-8: 0.5rem;
  --pkt-spacing-12: 0.75rem;
  --pkt-spacing-16: 1rem;
  --pkt-spacing-24: 1.5rem;
  --pkt-spacing-32: 2rem;
  --pkt-spacing-40: 2.5rem;
  --pkt-spacing-64: 4rem;
  --pkt-spacing-104: 6.5rem;
}