@use '../abstracts/functions' as *;
@use 'colors' as *;

// Famille des polices de caractères
$font-family-monospace: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace !default;
//consolas, 'Lucida Console', Monaco, courier, monospace !default;
$font-family-serif: Georgia, Times, 'Times New Roman', serif !default;
$font-family-sans: Roboto, Noto, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$default-font-family: $font-family-sans !default;
$default-font-family-alt: $font-family-serif !default;

// La hauteur de la ligne est réglée sur le 'nombre d'or' pour une lisibilité optimale
$default-line-height: #{type-ratio('goldenRatio')} !default;
$default-line-height-ratio: 161.8033% !default;

/* Taille 18.4px, basé sur la taille de la police du Body 16px  */
$min-heading-font-size: 1em !default;
$max-heading-font-size: 1.15em !default;

$default-heading-font-weight: 500 !default;
$default-font-weight: 400 !default;

$vertical-flow-space-ratio: type-ratio('goldenSquareRatio') !default;
$vertical-heading-flow-space-ratio: type-ratio('goldenRatio') !default;

$spacing: 1.2rem !default;
$flow-spacing: 1.5rem !default;
$block-spacing-vertical: 6.4rem !default;
$min-block-spacing-vertical: 8vh !default;

$min-grid-col-width: 0 !default;

$global-border-width: 1px !default;
$global-outline-width: 2px !default;
$global-border-radius: 0.35rem !default;

/* neutral light color */
$neutral-light-color: $color-neutral-100 !default;
$on-neutral-light-color-s: saturation($neutral-light-color) !default;
$on-neutral-light-color-l: 10% !default;
$neutral-shadow: #{make-shadow('smooth-light')} !default;
$neutral-shadow-alt: 0 5px 6px rgba(0, 0, 0, 0.15), 0 12px 16px rgba(0, 0, 0, 0.15) !default;

$neutral-light-color-variation-1-s: saturation($neutral-light-color) !default;
$neutral-light-color-variation-1-l: 97% !default;
$on-neutral-light-color-variation-1-s: saturation($neutral-light-color) !default;
$on-neutral-light-color-variation-1-l: 10% !default;

$neutral-light-color-variation-2-s: saturation($neutral-light-color) !default;
$neutral-light-color-variation-2-l: 92% !default;
$on-neutral-light-color-variation-2-s: saturation($neutral-light-color) !default;
$on-neutral-light-color-variation-2-l: 15% !default;

$neutral-light-color-variation-3-s: saturation($neutral-light-color) !default;
$neutral-light-color-variation-3-l: 75% !default;
$on-neutral-light-color-variation-3-s: saturation($neutral-light-color) !default;
$on-neutral-light-color-variation-3-l: 50% !default;

/* neutral dark color */
$neutral-dark-color: $color-neutral-900 !default;
$neutral-dark-color-s: saturation($neutral-dark-color) !default;
$neutral-dark-color-l: 13%;
$on-neutral-dark-color-s: saturation($neutral-dark-color) !default;
$on-neutral-dark-color-l: 96% !default;

$neutral-dark-color-variation-1-s: saturation($neutral-dark-color) !default;
$neutral-dark-color-variation-1-l: 14% !default;
$on-neutral-dark-color-variation-1-s: saturation($neutral-dark-color) !default;
$on-neutral-dark-color-variation-1-l: 96% !default;

$neutral-dark-color-variation-2-s: saturation($neutral-dark-color) !default;
$neutral-dark-color-variation-2-l: 20% !default;
$on-neutral-dark-color-variation-2-s: saturation($neutral-dark-color) !default;
$on-neutral-dark-color-variation-2-l: 92% !default;

$neutral-dark-color-variation-3-s: saturation($neutral-dark-color) !default;
$neutral-dark-color-variation-3-l: 25% !default;
$on-neutral-dark-color-variation-3-s: saturation($neutral-dark-color) !default;
$on-neutral-dark-color-variation-3-l: 50% !default;

/* primary light color */
$brand-color: $color-SteelBlue2 !default;
$primary-light-color-s: saturation($brand-color) !default;
$primary-light-color-l: lightness($brand-color) !default;
$primary-shadow: #{make-shadow('smooth-light')} !default;
$on-primary-light-color-s: saturation($brand-color) !default;
$on-primary-light-color-l: 96% !default;

$primary-light-color-variation-1-s: saturation($brand-color) !default;
$primary-light-color-variation-1-l: 55% !default;
$on-primary-light-color-variation-1-s: saturation($brand-color) !default;
$on-primary-light-color-variation-1-l: 98% !default;
$primary-shadow-variation-1: none !default;

$primary-light-color-variation-2-s: 100% !default;
$primary-light-color-variation-2-l: 25% !default;
$on-primary-light-color-variation-2-s: saturation($brand-color) !default;
$on-primary-light-color-variation-2-l: 85% !default;
$primary-shadow-variation-2: #{make-shadow('diffuse')} !default;

$primary-light-color-variation-3-s: saturation($brand-color) !default;
$primary-light-color-variation-3-l: 40% !default;
$on-primary-light-color-variation-3-s: saturation($brand-color) !default;
$on-primary-light-color-variation-3-l: 80% !default;
$primary-shadow-variation-3: #{make-shadow('smooth')} !default;

/* primary dark color */
$primary-dark-color-s: saturation($brand-color) !default;
$primary-dark-color-l: 50% !default;
$on-primary-dark-color-s: 70% !default;
$on-primary-dark-color-l: 95% !default;

$primary-dark-color-variation-1-s: 70% !default;
$primary-dark-color-variation-1-l: 60% !default;
$on-primary-dark-color-variation-1-s: saturation($brand-color) !default;
$on-primary-dark-color-variation-1-l: 98% !default;

$primary-dark-color-variation-2-s: saturation($brand-color) !default;
$primary-dark-color-variation-2-l: 70% !default;
$on-primary-dark-color-variation-2-s: saturation($brand-color) !default;
$on-primary-dark-color-variation-2-l: 9% !default;

$primary-dark-color-variation-3-s: saturation($brand-color) !default;
$primary-dark-color-variation-3-l: 65% !default;
$on-primary-dark-color-variation-3-s: saturation($brand-color) !default;
$on-primary-dark-color-variation-3-l: 80% !default;

/* Secondary light color */
$secondary-color: $color-slate-500 !default;
$secondary-light-color-s: saturation($secondary-color) !default;
$secondary-light-color-l: 50% !default;
$on-secondary-light-color-s: saturation($secondary-color) !default;
$on-secondary-light-color-l: 95% !default;
$secondary-shadow: #{make-shadow('smooth-light')} !default;

$secondary-light-color-variation-1-s: saturation($secondary-color) !default;
$secondary-light-color-variation-1-l: 40% !default;
$on-secondary-light-color-variation-1-s: saturation($secondary-color) !default;
$on-secondary-light-color-variation-1-l: 95% !default;
$secondary-shadow-variation-1: none !default;

$secondary-light-color-variation-2-s: saturation($secondary-color) !default;
$secondary-light-color-variation-2-l: 25% !default;
$on-secondary-light-color-variation-2-s: saturation($secondary-color) !default;
$on-secondary-light-color-variation-2-l: 80% !default;
$secondary-shadow-variation-2: #{make-shadow('diffuse')} !default;

$secondary-light-color-variation-3-s: saturation($secondary-color) !default;
$secondary-light-color-variation-3-l: 35% !default;
$on-secondary-light-color-variation-3-s: saturation($secondary-color) !default;
$on-secondary-light-color-variation-3-l: 85% !default;
$secondary-shadow-variation-3: #{make-shadow('smooth')} !default;

/* Secondary dark color */
$secondary-dark-color-s: saturation($secondary-color) !default;
$secondary-dark-color-l: 50% !default;
$on-secondary-dark-color-s: saturation($secondary-color) !default;
$on-secondary-dark-color-l: 95% !default;

$secondary-dark-color-variation-1-s: saturation($secondary-color) !default;
$secondary-dark-color-variation-1-l: 60% !default;
$on-secondary-dark-color-variation-1-s: saturation($secondary-color) !default;
$on-secondary-dark-color-variation-1-l: 95% !default;

$secondary-dark-color-variation-2-s: saturation($secondary-color) !default;
$secondary-dark-color-variation-2-l: 65% !default;
$on-secondary-dark-color-variation-2-s: saturation($secondary-color) !default;
$on-secondary-dark-color-variation-2-l: 80% !default;

$secondary-dark-color-variation-3-s: saturation($secondary-color) !default;
$secondary-dark-color-variation-3-l: 65% !default;
$on-secondary-dark-color-variation-3-s: saturation($secondary-color) !default;
$on-secondary-dark-color-variation-3-l: 40% !default;

/* Success color */
$success-color: $color-emerald-400 !default;
$on-success-color-s: saturation($success-color) !default;
$on-success-color-l: 15% !default;

$success-color-variation-1-s: saturation($success-color) !default;
$success-color-variation-1-l: 80% !default;
$on-success-color-variation-1-s: saturation($success-color) !default;
$on-success-color-variation-1-l: 20% !default;

$success-color-variation-2-s: 35% !default;
$success-color-variation-2-l: 30% !default;
$on-success-color-variation-2-s: saturation($success-color) !default;
$on-success-color-variation-2-l: 90% !default;

/* Info color */
$info-color: $color-light-blue-400 !default;
$on-info-color-s: saturation($info-color) !default;
$on-info-color-l: 95% !default;

$info-color-variation-1-s: saturation($info-color) !default;
$info-color-variation-1-l: 80% !default;
$on-info-color-variation-1-s: saturation($info-color) !default;
$on-info-color-variation-1-l: 20% !default;

$info-color-variation-2-s: 35% !default;
$info-color-variation-2-l: 30% !default;
$on-info-color-variation-2-s: saturation($info-color) !default;
$on-info-color-variation-2-l: 90% !default;

/* Warning color */
$warning-color: $color-amber-400 !default;
$on-warning-color-s: saturation($warning-color) !default;
$on-warning-color-l: 15% !default;

$warning-color-variation-1-s: saturation($warning-color) !default;
$warning-color-variation-1-l: 80% !default;
$on-warning-color-variation-1-s: saturation($warning-color) !default;
$on-warning-color-variation-1-l: 20% !default;

$warning-color-variation-2-s: 35% !default;
$warning-color-variation-2-l: 30% !default;
$on-warning-color-variation-2-s: saturation($warning-color) !default;
$on-warning-color-variation-2-l: 90% !default;

/* Danger color */
$danger-color: $color-red-alt-500 !default;
$on-danger-color-s: saturation($danger-color) !default;
$on-danger-color-l: 95% !default;

$danger-color-variation-1-s: saturation($danger-color) !default;
$danger-color-variation-1-l: 80% !default;
$on-danger-color-variation-1-s: saturation($danger-color) !default;
$on-danger-color-variation-1-l: 10% !default;

$danger-color-variation-2-s: 35% !default;
$danger-color-variation-2-l: 30% !default;
$on-danger-color-variation-2-s: saturation($danger-color) !default;
$on-danger-color-variation-2-l: 95% !default;

/* misc colors */
$code-color-background: #2d2d2d !default;
$code-color-text: #d4d4d4 !default;
$code-color-tag: #569cd6 !default;
$code-color-property: #9cdcfe !default;
$code-color-value: #ce9178 !default;
$code-color-var: #9cdcfe !default;
$code-color-comment: #6a9955 !default;
$code-color-lang-background: transparent !default;
$code-color-lang-text: $color-teal-500 !default;

$kbd-color-background: $color-neutral-300 !default;
$kbd-color-text: $color-neutral-800 !default;

$ins-color-background: transparent !default;
$ins-color-text: $color-green-700 !default;

$del-color-background: transparent !default;
$del-color-text: $color-red-700 !default;

$divider-light-color: #{set-color-opacity($color-Black, 25)} !default;
$divider-dark-color: #{set-color-opacity($color-White, 25)} !default;

$h1-light-color: $color-neutral-900 !default;
$h2-light-color: mix($color-neutral-900, $color-neutral-800) !default;
$h3-light-color: $color-neutral-800 !default;
$h4-light-color: mix($color-neutral-800, $color-neutral-700) !default;
$h5-light-color: $color-neutral-700 !default;
$h6-light-color: mix($color-neutral-700, $color-neutral-600) !default;

$h1-dark-color: $color-neutral-100 !default;
$h2-dark-color: mix($color-neutral-100, $color-neutral-200) !default;
$h3-dark-color: $color-neutral-200 !default;
$h4-dark-color: mix($color-neutral-200, $color-neutral-300) !default;
$h5-dark-color: $color-neutral-300 !default;
$h6-dark-color: mix($color-neutral-300, $color-neutral-400) !default;