@use 'sass:list';
@use 'sass:math';
@use '../variables' as variables;

@property --unitone--property--1em {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --unitone--property--100vw {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --unitone--result--1em-px {
  syntax: "<number> | <length>";
  inherits: false;
  initial-value: 0;
}

@property --unitone--result--100vw-px {
  syntax: "<number> | <length>";
  inherits: false;
  initial-value: 0;
}

@function _generate-fluid-spacing($min, $max) {
  @return clamp(
    #{ $min },
    #{ $min } + ((#{ $max } - #{ $min }) / (#{ variables.$max-breakpoint - variables.$min-breakpoint } * var(--unitone--base-font-size)) * (var(--unitone--result--100vw-px) - (#{ variables.$min-breakpoint } * var(--unitone--base-font-size)))),
    #{ $max }
  );
}

@function _generate-spacing($max) {
  $quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient });
  @return _generate-fluid-spacing(#{ $min }, #{ $max });
}

@function _generate-padding($max) {
  $quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient } * .2);
  @return _generate-fluid-spacing(#{ $min }, #{ $max });
}

* {
  /**
   * A value to get the unitless px value in trigonometric functions. (For Safari)
   */
  --unitone--property--1em: 1em;

  /**
   * em unitless px real value
   */
  --unitone--result--1em-px: calc(tan(atan2(var(--unitone--property--1em), 1px)));
}

/**
 * Global.
 */
:root {
  /**
   * Box shadow
   */
  --unitone--global--box-shadow: 0 5px 20px -5px rgb(0 0 0 / 20%);

  /**
   * Border radius
   */
  --unitone--global--border-radius: 4px;

  /**
   * Default gap
   */
  --unitone--global--gap: var(--unitone--s2);
  --unitone--global--text-gap: var(--unitone--s1);
}

/**
 * Typography.
 */
:root {
  /**
   * A value to get the unitless px value in trigonometric functions. (For Safari)
   */
  --unitone--property--100vw: 100vw;

  /**
   * 100vw unitless px real value.
   */
  --unitone--result--100vw-px: calc(tan(atan2(var(--unitone--property--100vw), 1px)));

  /**
   * Column width in typography.
   */
  --unitone--measure: 42rem;

  /**
   * Font size level.
   * It is not recommended to override this value with :root in order to have the size determined based on 0.
   */
  --unitone--font-size: 0;

  /**
   * The 1rem px font size (no units).
   */
  --unitone--base-font-size: 16;

  --unitone--harmonic-sequence-base: 8;
  --unitone--min-harmonic-sequence-base: 10;
  --unitone--max-harmonic-sequence-base: var(--unitone--harmonic-sequence-base);

  /**
   * Gutter provided above and below the text in a line.
   */
  --unitone--half-leading: .3;
  --unitone--min-half-leading: .025;
  --unitone--line-height-curvature: 6;
  --unitone--min-line-height: calc(1 + 2 * min(var(--unitone--min-half-leading), var(--unitone--half-leading))); // Fallback.
  --unitone--max-line-height: calc(1 + 2 * var(--unitone--half-leading)); // Fallback.

  /**
   * Font family
   */
  --unitone--font-family: sans-serif;
}

/**
 * Modular scales for spaces (em based).
 */
:root {
  --unitone--em-3: calc((1lh - 1em) / 2);
  --unitone--em-2: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
  --unitone--em-1: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
  --unitone--em0: 0em;
  --unitone--em1: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
  --unitone--em2: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
  --unitone--em3: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
  --unitone--em4: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
  --unitone--em5: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
  --unitone--em6: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
  --unitone--em7: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });

  @supports not (top: 1lh) {
    --unitone--em-3: calc((var(--unitone--line-height) * 1em - 1em) / 2);
    --unitone--em-2: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
    --unitone--em-1: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
    --unitone--em1: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
    --unitone--em2: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
    --unitone--em3: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
    --unitone--em4: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
    --unitone--em5: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
    --unitone--em6: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
    --unitone--em7: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
  }
}

/**
 * Modular scales for spaces (rem based).
 */
:root {
  --unitone--rem-3: calc((1rlh - 1rem) / 2);
  --unitone--rem-2: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
  --unitone--rem-1: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
  --unitone--rem0: 0em;
  --unitone--rem1: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
  --unitone--rem2: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
  --unitone--rem3: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
  --unitone--rem4: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
  --unitone--rem5: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
  --unitone--rem6: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
  --unitone--rem7: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });

  @supports not (top: 1rlh) {
    --unitone--rem-3: calc((var(--unitone--line-height) * 1rem - 1rem) / 2);
    --unitone--rem-2: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
    --unitone--rem-1: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
    --unitone--rem1: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
    --unitone--rem2: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
    --unitone--rem3: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
    --unitone--rem4: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
    --unitone--rem5: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
    --unitone--rem6: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
    --unitone--rem7: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
  }
}

/**
 * Modular scales for spaces.
 */
:root {
  --unitone--s-3: var(--unitone--em-3);
  --unitone--s-2: var(--unitone--em-2);
  --unitone--s-1: var(--unitone--em-1);
  --unitone--s0: var(--unitone--em0);
  --unitone--s1: var(--unitone--em1);
  --unitone--s2: #{ _generate-spacing(var(--unitone--em2)) };
  --unitone--s3: #{ _generate-spacing(var(--unitone--em3)) };
  --unitone--s4: #{ _generate-spacing(var(--unitone--em4)) };
  --unitone--s5: #{ _generate-spacing(var(--unitone--em5)) };
  --unitone--s6: #{ _generate-spacing(var(--unitone--em6)) };
  --unitone--s7: #{ _generate-spacing(var(--unitone--em7)) };

  --unitone--s1s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em1)) };
  --unitone--s2s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em2)) };
  --unitone--s3s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em3)) };
  --unitone--s4s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em4)) };
  --unitone--s5s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em5)) };
  --unitone--s6s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em6)) };
  --unitone--s7s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em7)) };

  --unitone--s2m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em2)) };
  --unitone--s3m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em3)) };
  --unitone--s4m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em4)) };
  --unitone--s5m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em5)) };
  --unitone--s6m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em6)) };
  --unitone--s7m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em7)) };
}

/**
 * Modular scales for padding.
 *
 * Left and right padding on mobile devices has a significant impact on readability.
 * For this reason, we prepare special scales.
 */
:root {
  --unitone--p-3: var(--unitone--em-3);
  --unitone--p-2: var(--unitone--em-2);
  --unitone--p-1: var(--unitone--em-1);
  --unitone--p0: var(--unitone--em0);
  --unitone--p1: var(--unitone--em1);
  --unitone--p2: #{ _generate-padding(var(--unitone--em2)) };
  --unitone--p3: #{ _generate-padding(var(--unitone--em3)) };
  --unitone--p4: #{ _generate-padding(var(--unitone--em4)) };
  --unitone--p5: #{ _generate-padding(var(--unitone--em5)) };
  --unitone--p6: #{ _generate-padding(var(--unitone--em6)) };
  --unitone--p7: #{ _generate-padding(var(--unitone--em7)) };

  --unitone--p1s: var(--unitone--s1s);
  --unitone--p2s: var(--unitone--s2s);
  --unitone--p3s: var(--unitone--s3s);
  --unitone--p4s: var(--unitone--s4s);
  --unitone--p5s: var(--unitone--s5s);
  --unitone--p6s: var(--unitone--s6s);
  --unitone--p7s: var(--unitone--s7s);

  --unitone--p2m: var(--unitone--s2m);
  --unitone--p3m: var(--unitone--s3m);
  --unitone--p4m: var(--unitone--s4m);
  --unitone--p5m: var(--unitone--s5m);
  --unitone--p6m: var(--unitone--s6m);
  --unitone--p7m: var(--unitone--s7m);
}

/**
 * Grids.
 */
:root {
  /**
   * Default gutters
   */
  --unitone--global--gutters: max(min(6vw, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));

  /**
   * Max width of the container.
   */
  --unitone--container-max-width: #{ variables.$container-max-width };

  --unitone--grid-columns: #{ variables.$grid-columns };
  --unitone--grid-rows: #{ variables.$grid-rows };
  --unitone--grid-gap: var(--unitone--global--gap);

  /**
   * Grid sizes (% based).
   */
  --unitone--_pg-base: calc((100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
  --unitone--pg0: 0%;
  @for $i from 1 through variables.$grid-columns {
    --unitone--pg#{ $i }: calc(var(--unitone--_pg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
  }

  /**
   * Grid sizes (container based).
   */
  --unitone--_cg-base: calc((var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
  --unitone--cg0: 0%;
  @for $i from 1 through variables.$grid-columns {
    --unitone--cg#{ $i }: calc(var(--unitone--_cg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
  }
}

/**
 * Colors.
 *
 * This color palette is based on Tailwind.
 * @see https://tailwindcss.com/docs/customizing-colors
 */
:root {
  --unitone--color--background: #fff;
  --unitone--color--background-alt: #222; // Inversion color
  --unitone--color--text: #222;
  --unitone--color--text-alt: #fff; // Inversion color
  --unitone--color--text-immutable: #222; // Colors not inverted in dark mode

  --unitone--color--white: #fff;

  --unitone--color--pale-gray: #f9fafb;
  --unitone--color--bright-gray: #f3f4f6;
  --unitone--color--light-gray: #e5e7eb;
  --unitone--color--gray: #9ca3af;
  --unitone--color--dark-gray: #374151;
  --unitone--color--heavy-gray: #030712;

  --unitone--color--twilight-light: rgba(255, 255, 255, .3);
  --unitone--color--twilight: rgba(255, 255, 255, .5);
  --unitone--color--twilight-heavy: rgba(255, 255, 255, .7);
  --unitone--color--dimmed-light: rgba(0, 0, 0, .3);
  --unitone--color--dimmed: rgba(0, 0, 0, .5);
  --unitone--color--dimmed-heavy: rgba(0, 0, 0, .7);

  --unitone--color--pale-red: #fef2f2;
  --unitone--color--bright-red: #fee2e2;
  --unitone--color--light-red: #fecaca;
  --unitone--color--red: #f87171;
  --unitone--color--dark-red: #b91c1c;
  --unitone--color--heavy-red: #450a0a;

  --unitone--color--pale-orange: #fff7ed;
  --unitone--color--bright-orange: #ffedd5;
  --unitone--color--light-orange: #fed7aa;
  --unitone--color--orange: #fb923c;
  --unitone--color--dark-orange: #c2410c;
  --unitone--color--heavy-orange: #431407;

  --unitone--color--pale-yellow: #fefce8;
  --unitone--color--bright-yellow: #fef9c3;
  --unitone--color--light-yellow: #fef08a;
  --unitone--color--yellow: #facc15;
  --unitone--color--dark-yellow: #a16207;
  --unitone--color--heavy-yellow: #422006;

  --unitone--color--pale-lime: #f7fee7;
  --unitone--color--bright-lime: #ecfccb;
  --unitone--color--light-lime: #d9f99d;
  --unitone--color--lime: #a3e635;
  --unitone--color--dark-lime: #4d7c0f;
  --unitone--color--heavy-lime: #1a2e05;

  --unitone--color--pale-green: #f0fdf4;
  --unitone--color--bright-green: #dcfce7;
  --unitone--color--light-green: #bbf7d0;
  --unitone--color--green: #4ade80;
  --unitone--color--dark-green: #15803d;
  --unitone--color--heavy-green: #052e16;

  --unitone--color--pale-teal: #f0fdfa;
  --unitone--color--bright-teal: #ccfbf1;
  --unitone--color--light-teal: #99f6e4;
  --unitone--color--teal: #2dd4bf;
  --unitone--color--dark-teal: #0f766e;
  --unitone--color--heavy-teal: #042f2e;

  --unitone--color--pale-cyan: #ecfeff;
  --unitone--color--bright-cyan: #cffafe;
  --unitone--color--light-cyan: #a5f3fc;
  --unitone--color--cyan: #22d3ee;
  --unitone--color--dark-cyan: #0e7490;
  --unitone--color--heavy-cyan: #083344;

  --unitone--color--pale-blue: #eff6ff;
  --unitone--color--bright-blue: #dbeafe;
  --unitone--color--light-blue: #bfdbfe;
  --unitone--color--blue: #60a5fa;
  --unitone--color--dark-blue: #1d4ed8;
  --unitone--color--heavy-blue: #172554;

  --unitone--color--pale-indigo: #eef2ff;
  --unitone--color--bright-indigo: #e0e7ff;
  --unitone--color--light-indigo: #c7d2fe;
  --unitone--color--indigo: #818cf8;
  --unitone--color--dark-indigo: #4338ca;
  --unitone--color--heavy-indigo: #1e1b4b;

  --unitone--color--pale-violet: #f5f3ff;
  --unitone--color--bright-violet: #ede9fe;
  --unitone--color--light-violet: #ddd6fe;
  --unitone--color--violet: #a78bfa;
  --unitone--color--dark-violet: #6d28d9;
  --unitone--color--heavy-violet: #2e1065;

  --unitone--color--pale-purple: #faf5ff;
  --unitone--color--bright-purple: #f3e8ff;
  --unitone--color--light-purple: #e9d5ff;
  --unitone--color--purple: #c084fc;
  --unitone--color--dark-purple: #7e22ce;
  --unitone--color--heavy-purple: #3b0764;

  --unitone--color--pale-pink: #fdf2f8;
  --unitone--color--bright-pink: #fce7f3;
  --unitone--color--light-pink: #fbcfe8;
  --unitone--color--pink: #f472b6;
  --unitone--color--dark-pink: #be185d;
  --unitone--color--heavy-pink: #500724;
}

@supports (-moz-appearance: none) {
	:root {
		--unitone--is-firefox: true;
	}
}