/**
 * Design Tokens from Core Library
 * Generated from Figma design system
 */

:root {
    /* ========================================
       Colors - Stø Greens
       ======================================== */
    --color-sto-dark: #093D05;
    --color-sto-default: #67e702;
    --color-sto-light: #81ed25;
    --color-sto-extra-light: #96f143;
    --color-sto-lightest: #ebfdd4;

    /* ========================================
       Colors - BiBa Purples
       ======================================== */
    --color-biba-deep: #39134c;
    --color-biba-dark: #422f49;
    --color-biba-default: #7a5a88;
    --color-biba-light: #b8a5be;
    --color-biba-extra-light: #e0d7e3;
    --color-biba-lightest: #f9f5ff;

    /* ========================================
       Colors - Sand
       ======================================== */
    --color-sand-dark: #68543e;
    --color-sand-default: #a5917e;
    --color-sand-light: #dec3a5;

    /* ========================================
       Colors - Beige
       ======================================== */
    --color-beige-default: #f5efea;
    --color-beige-light: #faf7f4;

    /* ========================================
       Colors - Neutral Dark (for darkmode)
       ======================================== */
    --color-neutral-dark-1: #121a12;
    --color-neutral-dark-2: #232b23;
    --color-neutral-dark-3: #343c34;
    --color-neutral-dark-4: #454d45;
    --color-neutral-dark-5: #bdbfbd;
    --color-neutral-dark-6: #dadeda;

    /* ========================================
       Colors - Neutral Light (for lightmode)
       ======================================== */
    --color-neutral-light-1: #ffffff;
    --color-neutral-light-2: #eeece9;
    --color-neutral-light-3: #dddad5;
    --color-neutral-light-4: #b5b3b1;
    --color-neutral-light-5: #6a6867;

    /* ========================================
       Spacing (8px grid system)
       ======================================== */
    --spacing-0: 0px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-64: 64px;
    --spacing-96: 96px;

    /* ========================================
       Corner Radius
       ======================================== */
    --radius-0: 0px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-32: 32px;
    --radius-48: 48px;
    --radius-64: 64px;
    --radius-96: 96px;
    --radius-128: 128px;
    --radius-192: 192px;
    --radius-full: 999px;

    /* ========================================
       Semantic Tokens (Service Section)
       ======================================== */
    --radius-service-level-2: var(--radius-24);
    --radius-service-level-3: var(--radius-12);

    /* ========================================
       Typography - Font Families
       ======================================== */
    --font-family-brand: "PP Eiko", system-ui, sans-serif;
    --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-system: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;

    /* ========================================
       Typography - Font Weights
       ======================================== */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ========================================
       Typography - Headings (Large Screens)
       ======================================== */
    /* H1 - Brand Font */
    --font-h1-large-family: var(--font-family-brand);
    --font-h1-large-size: 72px;
    --font-h1-large-weight: var(--font-weight-medium);
    --font-h1-large-line-height: 1.2;

    --font-h1-medium-family: var(--font-family-brand);
    --font-h1-medium-size: 64px;
    --font-h1-medium-weight: var(--font-weight-medium);
    --font-h1-medium-line-height: 1.2;

    --font-h1-small-family: var(--font-family-brand);
    --font-h1-small-size: 40px;
    --font-h1-small-weight: var(--font-weight-medium);
    --font-h1-small-line-height: 1.2;

    /* H2 - Base Font */
    --font-h2-large-family: var(--font-family-base);
    --font-h2-large-size: 56px;
    --font-h2-large-weight: var(--font-weight-medium);
    --font-h2-large-line-height: 1.3;

    --font-h2-medium-family: var(--font-family-base);
    --font-h2-medium-size: 48px;
    --font-h2-medium-weight: var(--font-weight-medium);
    --font-h2-medium-line-height: 1.3;

    --font-h2-small-family: var(--font-family-base);
    --font-h2-small-size: 32px;
    --font-h2-small-weight: var(--font-weight-medium);
    --font-h2-small-line-height: 1.3;

    /* H3 - Base Font */
    --font-h3-large-family: var(--font-family-base);
    --font-h3-large-size: 48px;
    --font-h3-large-weight: var(--font-weight-medium);
    --font-h3-large-line-height: 1.3;

    --font-h3-medium-family: var(--font-family-base);
    --font-h3-medium-size: 40px;
    --font-h3-medium-weight: var(--font-weight-medium);
    --font-h3-medium-line-height: 1.3;

    --font-h3-small-family: var(--font-family-base);
    --font-h3-small-size: 28px;
    --font-h3-small-weight: var(--font-weight-medium);
    --font-h3-small-line-height: 1.3;

    /* H4 - Base Font */
    --font-h4-large-family: var(--font-family-base);
    --font-h4-large-size: 36px;
    --font-h4-large-weight: var(--font-weight-medium);
    --font-h4-large-line-height: 1.3;

    --font-h4-medium-family: var(--font-family-base);
    --font-h4-medium-size: 32px;
    --font-h4-medium-weight: var(--font-weight-medium);
    --font-h4-medium-line-height: 1.3;

    --font-h4-small-family: var(--font-family-base);
    --font-h4-small-size: 24px;
    --font-h4-small-weight: var(--font-weight-medium);
    --font-h4-small-line-height: 1.3;

    /* H5 - Base Font */
    --font-h5-large-family: var(--font-family-base);
    --font-h5-large-size: 28px;
    --font-h5-large-weight: var(--font-weight-medium);
    --font-h5-large-line-height: 1.3;

    --font-h5-medium-family: var(--font-family-base);
    --font-h5-medium-size: 24px;
    --font-h5-medium-weight: var(--font-weight-medium);
    --font-h5-medium-line-height: 1.3;

    --font-h5-small-family: var(--font-family-base);
    --font-h5-small-size: 20px;
    --font-h5-small-weight: var(--font-weight-medium);
    --font-h5-small-line-height: 1.3;

    /* ========================================
       Typography - Body Text
       ======================================== */
    /* Lead (Ingress) */
    --font-lead-large-family: var(--font-family-base);
    --font-lead-large-size: 28px;
    --font-lead-large-weight: var(--font-weight-regular);
    --font-lead-large-line-height: 1.4;

    --font-lead-medium-family: var(--font-family-base);
    --font-lead-medium-size: 24px;
    --font-lead-medium-weight: var(--font-weight-regular);
    --font-lead-medium-line-height: 1.4;

    --font-lead-small-family: var(--font-family-base);
    --font-lead-small-size: 20px;
    --font-lead-small-weight: var(--font-weight-regular);
    --font-lead-small-line-height: 1.4;

    /* Subtitle */
    --font-subtitle-large-family: var(--font-family-base);
    --font-subtitle-large-size: 24px;
    --font-subtitle-large-weight: var(--font-weight-medium);
    --font-subtitle-large-line-height: 1.3;

    --font-subtitle-medium-family: var(--font-family-base);
    --font-subtitle-medium-size: 20px;
    --font-subtitle-medium-weight: var(--font-weight-medium);
    --font-subtitle-medium-line-height: 1.3;

    --font-subtitle-small-family: var(--font-family-base);
    --font-subtitle-small-size: 20px;
    --font-subtitle-small-weight: var(--font-weight-medium);
    --font-subtitle-small-line-height: 1.3;

    /* Body */
    --font-body-large-family: var(--font-family-base);
    --font-body-large-size: 20px;
    --font-body-large-weight: var(--font-weight-regular);
    --font-body-large-line-height: 1.4;

    --font-body-medium-family: var(--font-family-base);
    --font-body-medium-size: 18px;
    --font-body-medium-weight: var(--font-weight-regular);
    --font-body-medium-line-height: 1.4;

    --font-body-small-family: var(--font-family-base);
    --font-body-small-size: 16px;
    --font-body-small-weight: var(--font-weight-regular);
    --font-body-small-line-height: 1.3;

    /* Caption */
    --font-caption-large-family: var(--font-family-base);
    --font-caption-large-size: 16px;
    --font-caption-large-weight: var(--font-weight-regular);
    --font-caption-large-line-height: 1.3;

    --font-caption-medium-family: var(--font-family-base);
    --font-caption-medium-size: 14px;
    --font-caption-medium-weight: var(--font-weight-regular);
    --font-caption-medium-line-height: 1.3;

    --font-caption-small-family: var(--font-family-system);
    --font-caption-small-size: 12px;
    --font-caption-small-weight: var(--font-weight-regular);
    --font-caption-small-line-height: 1.45;

    /* Caption Strong */
    --font-caption-strong-large-family: var(--font-family-base);
    --font-caption-strong-large-size: 16px;
    --font-caption-strong-large-weight: var(--font-weight-medium);
    --font-caption-strong-large-line-height: 1.3;

    --font-caption-strong-medium-family: var(--font-family-base);
    --font-caption-strong-medium-size: 14px;
    --font-caption-strong-medium-weight: var(--font-weight-medium);
    --font-caption-strong-medium-line-height: 1.3;

    --font-caption-strong-small-family: var(--font-family-base);
    --font-caption-strong-small-size: 14px;
    --font-caption-strong-small-weight: var(--font-weight-medium);
    --font-caption-strong-small-line-height: 1.3;

    /* ========================================
       Typography - Special Elements
       ======================================== */
    /* Tags */
    --font-tags-family: var(--font-family-base);
    --font-tags-size: 12px;
    --font-tags-weight: var(--font-weight-medium);
    --font-tags-line-height: 1.2;

    /* Links */
    --font-link-large-family: var(--font-family-base);
    --font-link-large-size: 18px;
    --font-link-large-weight: var(--font-weight-medium);
    --font-link-large-line-height: 1.2;

    --font-link-medium-family: var(--font-family-base);
    --font-link-medium-size: 16px;
    --font-link-medium-weight: var(--font-weight-medium);
    --font-link-medium-line-height: 1.2;

    --font-link-small-family: var(--font-family-base);
    --font-link-small-size: 18px;
    --font-link-small-weight: var(--font-weight-medium);
    --font-link-small-line-height: 1.2;

    /* ========================================
       Grid System & Breakpoints
       ======================================== */
    /* Breakpoints (in pixels and rem) */
    --breakpoint-xs: 320px;   /* 20rem - Extra small phone */
    --breakpoint-sm: 480px;   /* 30rem - Small phone */
    --breakpoint-md: 768px;   /* 48rem - Tablet */
    --breakpoint-lg: 1280px;  /* 80rem - Desktop */
    --breakpoint-xl: 1536px;  /* 96rem - Large desktop */
    --breakpoint-2xl: 1920px; /* 120rem - Widescreen */

    /* Layout - Navigation Widths */
    --nav-rail-width: 56px;     /* Compact side navigation */
    --nav-drawer-width: 252px;  /* Expanded side navigation */
    --nav-bar-height: 56px;     /* Top bar for mobile */

    /* Layout - Content Margins */
    --content-margin-mobile: 16px;
    --content-margin-tablet: 24px;
    --content-margin-desktop: 40px;

    /* Layout - Max Content Width */
    --content-max-width: 1440px;  /* Maximum content width for readability */

    /* Layout - Wrapper Margins (side margins from screen edge) */
    --wrapper-margin-widescreen: 212px;  /* Space on sides for widescreen with rail */
    --wrapper-margin-desktop: 0px;       /* No extra margin on desktop */

    /* ========================================
       Selection Controls (Radio, Checkbox, Switch)
       ======================================== */
    /* Control sizing */
    --selection-control-size: 24px;       /* Standard control size */
    --selection-control-padding: 2px;     /* Padding around control */
    --selection-switch-width: 40px;       /* Switch width */
    --selection-switch-height: 24px;      /* Switch height */
    --selection-switch-thumb-size: 20px;  /* Switch thumb/knob size */

    /* Border properties */
    --selection-border-width-default: 1px;
    --selection-border-width-active: 2px;
    --selection-focus-ring-width: 2px;

    /* Border radius */
    --selection-radius-checkbox: var(--radius-4);
    --selection-radius-radio: var(--radius-full);
    --selection-radius-switch: var(--radius-full);
    --selection-radius-focus-checkbox: var(--radius-8);
    --selection-radius-focus-radio: var(--radius-full);

    /* Colors - Default state */
    --selection-bg-unchecked: var(--color-neutral-light-1);
    --selection-bg-checked: var(--color-sto-default);
    --selection-border-unchecked: var(--color-neutral-light-4);
    --selection-border-checked: var(--color-sto-default);
    
    /* Colors - Hover state */
    --selection-bg-hover: var(--color-neutral-light-2);
    --selection-border-hover: var(--color-neutral-light-5);
    
    /* Colors - Active state */
    --selection-border-active: var(--color-sto-dark);
    
    /* Colors - Focus state */
    --selection-focus-ring-color: var(--color-sto-default);
    
    /* Colors - Disabled state */
    --selection-bg-disabled: var(--color-neutral-light-2);
    --selection-border-disabled: var(--color-neutral-light-4);
    --selection-opacity-disabled: 0.5;
    
    /* Colors - Error state */
    --selection-border-error: #dc2626; /* Red-600 */
    --selection-bg-error: #fef2f2;     /* Red-50 */

    /* Switch specific colors */
    --selection-switch-bg-off: var(--color-neutral-light-3);
    --selection-switch-bg-on: var(--color-sto-default);
    --selection-switch-thumb-bg: var(--color-neutral-light-1);

    /* Checkmark icon (SVG data URI) */
    --selection-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3334 4L6.00002 11.3333L2.66669 8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    /* Indeterminate icon (horizontal line) */
    --selection-indeterminate: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8H12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}